import { Button } from "@/components/ui/button";
import { Container, Kicker } from "@/components/site/section";
import { cn } from "@/lib/utils";

export function PageHero({
  kicker,
  title,
  lede,
  image,
  video,
  primary,
  secondary,
  tall = false,
}: {
  kicker?: string;
  title: string;
  lede?: string;
  image: string;
  video?: string;
  primary?: { label: string; to: string };
  secondary?: { label: string; to: string };
  tall?: boolean;
}) {
  return (
    <section className={cn("relative overflow-hidden bg-ink", tall ? "min-h-[92dvh]" : "min-h-[72dvh]")}>
      {video ? (
        <video
          className="absolute inset-0 h-full w-full object-cover"
          src={video}
          poster={image}
          autoPlay
          muted
          loop
          playsInline
        />
      ) : (
        <img src={image} alt="" className="absolute inset-0 h-full w-full object-cover ken-burns" />
      )}
      <div className="absolute inset-0 bg-gradient-to-t from-ink via-ink/45 to-ink/30" />
      <Container className="relative flex min-h-[inherit] items-end pb-16 pt-32">
        <div className="max-w-3xl">
          {kicker ? <Kicker>{kicker}</Kicker> : null}
          <h1 className="font-serif text-5xl leading-[1.05] sm:text-6xl md:text-7xl">{title}</h1>
          {lede ? <p className="mt-6 max-w-xl text-lg text-ivory/80">{lede}</p> : null}
          {(primary || secondary) && (
            <div className="mt-8 flex flex-wrap gap-3">
              {primary ? <Button to={primary.to}>{primary.label}</Button> : null}
              {secondary ? (
                <Button to={secondary.to} variant="outline">
                  {secondary.label}
                </Button>
              ) : null}
            </div>
          )}
        </div>
      </Container>
    </section>
  );
}