import * as React from "react"

import { cn } from "@/lib/utils"
import { Separator } from "@/components/ui/separator"

export interface PageHeaderProps extends React.ComponentProps<"div"> {
  title: string
  description?: string
  /** Right-aligned action slot, e.g. buttons. */
  actions?: React.ReactNode
  /** Optional eyebrow / breadcrumb line above the title. */
  eyebrow?: string
}

/**
 * PageHeader — the title block at the top of a page/section.
 * title + description on the left, actions on the right, then a rule.
 */
export function PageHeader({
  title,
  description,
  actions,
  eyebrow,
  className,
  ...props
}: PageHeaderProps) {
  return (
    <div className={cn("space-y-4", className)} {...props}>
      <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
        <div className="space-y-1">
          {eyebrow && (
            <p className="text-muted-foreground text-xs font-medium tracking-wide uppercase">
              {eyebrow}
            </p>
          )}
          <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
          {description && (
            <p className="text-muted-foreground text-sm">{description}</p>
          )}
        </div>
        {actions && <div className="flex items-center gap-2">{actions}</div>}
      </div>
      <Separator />
    </div>
  )
}