'use client'

import { Button } from '@admin/components/ui/button'
import { ChevronLeft } from 'lucide-react'
import { useRouter } from 'next/navigation'

interface PageHeaderProps {
  title: string
  children?: React.ReactNode
  search?: React.ReactNode
  actions?: React.ReactNode
  hasBackButton?: boolean
}

export function PageHeader({
  title,
  children,
  search,
  actions,
  hasBackButton = true
}: PageHeaderProps) {
  const router = useRouter()

  return (
    <>
      <header className="fixed top-0 right-0 left-(--admin-shell-content-left) z-200 grid h-14 grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center border-t border-b border-border/80 bg-sidebar px-4 transition-[left] duration-200 ease-linear">
        <div className="flex w-full items-center justify-start gap-2">
          {hasBackButton && (
            <Button variant="ghost" size="icon" onClick={() => router.back()}>
              <ChevronLeft className="size-4" />
            </Button>
          )}
        </div>
        <div className="flex min-w-0 items-center justify-center gap-2">
          <h2 className="truncate text-sm font-medium tracking-tight">{title}</h2>
        </div>
        <div className="flex w-full min-w-0 items-center justify-end gap-2">
          {children}
          {search}
          {actions}
        </div>
      </header>
      <div className="h-14 shrink-0" aria-hidden="true" />
    </>
  )
}