import { OutlineButton, OutlineLink } from "@/components/outline-button";
import { cn } from "@/lib/utils";

type Cta =
  | { label: string; to: string; hash?: string }
  | { label: string; onClick: () => void };

type Props = {
  kicker?: string;
  title: string;
  image: string;
  video?: string;
  ctas?: Cta[];
  align?: "start" | "end";
  priority?: boolean;
  className?: string;
};

export function HeroSection({
  kicker,
  title,
  image,
  video,
  ctas = [],
  align = "start",
  priority = false,
  className,
}: Props) {
  return (
    <section
      className={cn(
        "relative flex min-h-dvh w-full items-end overflow-hidden bg-bg",
        className,
      )}
    >
      <div className="absolute inset-0">
        {video ? (
          <video
            className="h-full w-full object-cover"
            autoPlay
            muted
            loop
            playsInline
            poster={image}
            preload={priority ? "auto" : "metadata"}
          >
            <source src={video} type="video/mp4" />
          </video>
        ) : (
          <img
            src={image}
            alt=""
            className="kenburns h-full w-full object-cover"
            fetchPriority={priority ? "high" : "auto"}
          />
        )}
      </div>
      <div className="hero-scrim pointer-events-none absolute inset-0" />
      <div
        className={cn(
          "relative z-10 w-full max-w-3xl px-6 pb-32 pt-32 sm:px-12 sm:pb-36 lg:px-20 lg:pb-40",
          align === "end" && "ml-auto text-right",
        )}
      >
        <div className="stagger-in">
          {kicker ? (
            <p className="mb-2 font-display text-kicker font-medium uppercase tracking-wide text-fg">
              {kicker}
            </p>
          ) : null}
          <h2 className="font-display text-hero font-semibold uppercase leading-tight tracking-hero whitespace-pre-line">
            {title}
          </h2>
          {ctas.length > 0 ? (
            <div
              className={cn(
                "mt-7 flex flex-wrap gap-3",
                align === "end" && "justify-end",
              )}
            >
              {ctas.map((cta) =>
                "to" in cta ? (
                  <OutlineLink key={cta.label} to={cta.to} hash={cta.hash}>
                    {cta.label}
                  </OutlineLink>
                ) : (
                  <OutlineButton key={cta.label} onClick={cta.onClick}>
                    {cta.label}
                  </OutlineButton>
                ),
              )}
            </div>
          ) : null}
        </div>
      </div>
    </section>
  );
}