import { forwardRef, type HTMLAttributes, type ReactNode } from 'react'
import { cn } from '../primitives/utils'

export interface DetailHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
  icon?: ReactNode
  title: ReactNode
  subtitle?: ReactNode
  badges?: ReactNode[]
  actions?: ReactNode
  trailing?: ReactNode
  backAction?: ReactNode
}

const DetailHeader = forwardRef<HTMLElement, DetailHeaderProps>(
  ({ icon, title, subtitle, badges, actions, trailing, backAction, className, ...props }, ref) => (
    <header ref={ref} className={cn('flex flex-col gap-4 pb-4', className)} {...props}>
      {backAction && <div>{backAction}</div>}
      <div className="flex items-start gap-4">
        {icon && (
          <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-foreground/[0.06] text-foreground-secondary [&>svg]:size-6">
            {icon}
          </div>
        )}
        <div className="min-w-0 flex-1">
          <div className="flex items-center gap-3">
            <h1 className="truncate text-xl font-bold tracking-tight text-foreground">{title}</h1>
            {badges && badges.length > 0 && (
              <div className="flex shrink-0 items-center gap-1.5">{badges}</div>
            )}
          </div>
          {subtitle && <p className="mt-0.5 text-sm text-foreground-secondary">{subtitle}</p>}
        </div>
        {trailing && <div className="shrink-0">{trailing}</div>}
        {actions && <div className="flex shrink-0 items-center gap-2">{actions}</div>}
      </div>
    </header>
  )
)
DetailHeader.displayName = 'DetailHeader'
export { DetailHeader }
