import type { ReactNode } from "react"

import { Button } from "@/components/ui/button"
import { Separator } from "@/components/ui/separator"
import { SidebarTrigger } from "@/components/ui/sidebar"

interface SiteHeaderProps {
  title: string
  lead?: string
  primaryAction?: ReactNode
  secondaryAction?: ReactNode
}

export function SiteHeader({
  title,
  lead,
  primaryAction,
  secondaryAction,
}: SiteHeaderProps) {
  return (
    <header className="flex h-(--header-height) shrink-0 items-center gap-3 border-b bg-background/80 px-6 py-3 backdrop-blur supports-[backdrop-filter]:bg-background/60 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height) lg:px-8">
      <SidebarTrigger className="-ml-1" />
      <Separator orientation="vertical" className="mx-3 hidden h-6 sm:block" />
      <div className="flex flex-1 flex-col gap-1">
        {lead ? <span className="text-sm text-muted-foreground">{lead}</span> : null}
        <h1 className="text-lg font-semibold">{title}</h1>
      </div>
      <div className="flex items-center gap-2">
        {secondaryAction}
        {primaryAction}
      </div>
    </header>
  )
}

SiteHeader.PrimaryButton = function SiteHeaderPrimaryButton({
  children,
  ...props
}: React.ComponentProps<typeof Button>) {
  return (
    <Button size="sm" {...props}>
      {children}
    </Button>
  )
}

SiteHeader.SecondaryButton = function SiteHeaderSecondaryButton({
  children,
  ...props
}: React.ComponentProps<typeof Button>) {
  return (
    <Button size="sm" variant="outline" {...props}>
      {children}
    </Button>
  )
}