"use client"

import type { ReactNode } from "react"
import { Separator } from "@/components/ui/separator"
import { SidebarTrigger } from "@/components/ui/sidebar"
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
import { AppsMenu } from "@/components/apps-menu"
import { SystemMonitorPopover } from "@/components/system-monitor-popover"

interface Crumb {
  label: string
  href?: string
}

interface PageHeaderProps {
  crumbs: Crumb[]
  actions?: ReactNode
}

/** Header chrome — AppsMenu + SystemMonitor; theme in NavUser. @see https://reui.io/preview/base/app-shell-12 */
export function PageHeader({ crumbs, actions }: PageHeaderProps) {
  return (
    <header className="bg-background sticky top-0 z-10 flex h-12 shrink-0 items-center gap-2 border-b px-4 md:px-6">
      <SidebarTrigger className="-ml-1" />
      <Separator orientation="vertical" className="mr-2 data-[orientation=vertical]:h-4" />
      <Breadcrumb>
        <BreadcrumbList>
          {crumbs.map((crumb, i) => (
            <span key={i} className="flex items-center gap-1.5">
              {i > 0 && <BreadcrumbSeparator />}
              <BreadcrumbItem>
                {i < crumbs.length - 1 && crumb.href ? (
                  <BreadcrumbLink href={crumb.href}>{crumb.label}</BreadcrumbLink>
                ) : i < crumbs.length - 1 ? (
                  <span className="text-muted-foreground text-sm">{crumb.label}</span>
                ) : (
                  <BreadcrumbPage>{crumb.label}</BreadcrumbPage>
                )}
              </BreadcrumbItem>
            </span>
          ))}
        </BreadcrumbList>
      </Breadcrumb>
      <div className="ml-auto flex items-center gap-2">
        {actions ? <div className="flex items-center gap-2">{actions}</div> : null}
        <AppsMenu />
        <SystemMonitorPopover />
      </div>
    </header>
  )
}