import Link from "./site-link";
import Image from "next/image";

type PageHeroProps = {
  eyebrow: string;
  title: string;
  description: string;
  primary?: { href: string; label: string };
  secondary?: { href: string; label: string };
  image?: { src: string; alt: string; credit?: string; width?: number; height?: number };
  tone?: "light" | "dark" | "yellow";
};

export function PageHero({
  eyebrow,
  title,
  description,
  primary,
  secondary,
  image,
  tone = "light",
}: PageHeroProps) {
  return (
    <section className={`page-hero page-hero--${tone === "dark" ? "light" : tone}`}>
      <div className={`shell page-hero__grid ${image ? "page-hero__grid--image" : ""}`}>
        <div className="page-hero__copy">
          <p className="eyebrow">{eyebrow}</p>
          <h1>{title}</h1>
          <p className="lede">{description}</p>
          {(primary || secondary) && (
            <div className="button-row">
              {primary && (primary.href.startsWith("https://wa.me/") ? <a className="button button--primary" data-cta="pagina_whatsapp" href={primary.href} target="_blank" rel="noopener noreferrer">{primary.label}</a> : <Link className="button button--primary" href={primary.href}>{primary.label}</Link>)}
              {secondary && <Link className="button button--ghost" href={secondary.href}>{secondary.label}</Link>}
            </div>
          )}
        </div>
        {image && (
          <figure className="page-hero__media">
            <Image
              src={image.src}
              alt={image.alt}
              width={image.width ?? 1600}
              height={image.height ?? 1067}
              priority
              sizes="(max-width: 900px) 100vw, 45vw"
            />
            {image.credit && <figcaption>{image.credit}</figcaption>}
          </figure>
        )}
      </div>
    </section>
  );
}