import type { ReactNode } from "react";
import { Badge } from "@/components/ui/badge";
import { Sparkles } from "lucide-react";

export function PageHeader({
  eyebrow,
  title,
  subtitle,
  children,
}: {
  eyebrow: string;
  title: string;
  subtitle?: string;
  children?: ReactNode;
}) {
  return (
    <header className="mb-8 max-w-3xl md:mb-10">
      <Badge
        variant="outline"
        className="mb-3 gap-1.5 border-brand/30 bg-brand-soft/40 px-2.5 py-0.5 text-[11px] text-brand md:mb-4 md:px-3 md:py-1 md:text-xs"
      >
        <Sparkles className="h-3 w-3" />
        {eyebrow}
      </Badge>
      <h1 className="font-serif text-3xl font-medium tracking-tight text-foreground text-balance sm:text-4xl md:text-5xl">
        {title}
      </h1>
      {subtitle ? (
        <p className="mt-3 font-serif text-base italic text-muted-foreground text-balance sm:text-lg md:mt-4 md:text-xl">
          {subtitle}
        </p>
      ) : null}
      {children ? <div className="mt-4 md:mt-5">{children}</div> : null}
    </header>
  );
}