import type { ReactNode } from 'react'
import { SidebarTrigger } from '@mdxui/primitives/sidebar'
import { Separator } from '@mdxui/primitives/separator'

export interface PageHeaderProps {
  /** Breadcrumbs or other navigation */
  breadcrumbs?: ReactNode
  /** Title for the page */
  title?: string
  /** Description/subtitle for the page */
  description?: string
  /** Actions to display on the right side */
  actions?: ReactNode
  /** Whether to show the sidebar trigger */
  showSidebarTrigger?: boolean
  /** Additional className */
  className?: string
}

/**
 * PageHeader renders the header area for a page within the app shell.
 * Includes sidebar trigger, breadcrumbs, title, and actions.
 *
 * @example
 * ```tsx
 * <PageHeader
 *   breadcrumbs={<AppBreadcrumbs />}
 *   title="Users"
 *   description="Manage user accounts"
 *   actions={
 *     <Button>
 *       <Plus className="mr-2 h-4 w-4" />
 *       Add User
 *     </Button>
 *   }
 * />
 * ```
 */
export function PageHeader({
  breadcrumbs,
  title,
  description,
  actions,
  showSidebarTrigger = true,
  className,
}: PageHeaderProps) {
  const hasTitleSection = title || description

  return (
    <header
      className={`flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12 ${className ?? ''}`}
    >
      <div className="flex w-full items-center justify-between gap-2 px-4">
        <div className="flex items-center gap-2">
          {showSidebarTrigger && <SidebarTrigger className="-ml-1" />}
          {showSidebarTrigger && (breadcrumbs || hasTitleSection) && (
            <Separator orientation="vertical" className="mr-2 data-[orientation=vertical]:h-4" />
          )}
          {breadcrumbs}
          {hasTitleSection && (
            <div className="flex flex-col">
              {title && <h1 className="text-lg font-semibold">{title}</h1>}
              {description && (
                <p className="text-sm text-muted-foreground">{description}</p>
              )}
            </div>
          )}
        </div>
        {actions && <div className="flex items-center gap-2">{actions}</div>}
      </div>
    </header>
  )
}