import { MobileNavTrigger } from "@/components/shell/mobile-nav";
import { cn } from "@/lib/utils";

type Props = {
  title: string;
  subtitle?: string;
  /**
   * Slot eyebrow optionnel au-dessus du titre, typiquement un SectionStamp pour
   * signer la page avec le langage cartouche d'atelier. Réservé aux dashboards
   * principaux pour ne pas saturer.
   */
  eyebrow?: React.ReactNode;
  /** Boutons d'action contextuels (filtres, switcher, CTA). Wrappent sous mobile. */
  trailing?: React.ReactNode;
  className?: string;
};

/**
 * Topbar du shell portail/admin.
 * Aplat opaque (pas de glassmorphism), sticky.
 * Mobile : burger à gauche injecté automatiquement si un MobileNavProvider est dispo.
 */
export function Topbar({ title, subtitle, eyebrow, trailing, className }: Props) {
  return (
    <header
      className={cn(
        "sticky top-0 z-20 -mx-4 sm:-mx-6 md:-mx-10 px-4 sm:px-6 md:px-10 py-4 bg-background border-b border-border",
        className,
      )}
    >
      <div className="flex items-start gap-3 flex-wrap md:flex-nowrap">
        <div className="flex items-center gap-2 min-w-0 flex-1">
          <MobileNavTrigger />
          <div className="min-w-0">
            {eyebrow && <div className="mb-2">{eyebrow}</div>}
            <h1 className="text-xl font-semibold tracking-tight text-text truncate">{title}</h1>
            {subtitle && <p className="mt-0.5 text-sm text-text-dim hidden sm:block">{subtitle}</p>}
          </div>
        </div>
        {trailing && (
          <div className="flex items-center gap-2 shrink-0 flex-wrap justify-end w-full md:w-auto">
            {trailing}
          </div>
        )}
      </div>
    </header>
  );
}