'use client'

import { usePathname } from 'next/navigation'

import { navigation } from '@/lib/navigation'
import { Badge } from '@/components/Badge'
import { CopyDocsButton } from '@/components/CopyDocsButton'

type BadgeColor = React.ComponentProps<typeof Badge>['color']

export function DocsHeader({
  title,
  titleBadges,
}: {
  title?: string
  titleBadges?: Array<{ text: string; color?: BadgeColor }>
}) {
  const pathname = usePathname().replace(/\/+$/, '') || '/'
  const section = navigation.find((section) =>
    section.links.find((link) => link.href === pathname),
  )

  if (!title && !section) {
    return null
  }

  return (
    <header className="mb-9 space-y-1">
      <div className="flex items-start justify-between">
        {section ? (
          <p className="font-display text-sm font-medium text-sky-500">
            {section.title}
          </p>
        ) : (
          <span />
        )}
        <CopyDocsButton />
      </div>
      {title && (
        <h1 className="font-display text-3xl tracking-tight text-gray-900 dark:text-white">
          <span className="inline-flex items-center gap-2">
            <span>{title}</span>
            {titleBadges?.map((b, i) => (
              <Badge key={i} color={b.color ?? 'yellow'}>
                {b.text}
              </Badge>
            ))}
          </span>
        </h1>
      )}
    </header>
  )
}
