import Image from "next/image";
import { isUploadAssetPath } from "@/lib/image-url";
import { MenuTextureButton } from "./MenuTextureButton";

type Props = {
  eyebrow: string;
  title: string;
  subtitle: string;
  backgroundImageUrl: string;
  /** false : image seule, sans texte ni dégradé fort */
  textOverImage?: boolean;
};

export function Hero({
  eyebrow,
  title,
  subtitle,
  backgroundImageUrl,
  textOverImage = true,
}: Props) {
  return (
    <section
      id="accueil"
      className="relative flex min-h-[min(92vh,820px)] flex-col justify-end overflow-hidden rounded-b-[2.5rem] shadow-[0_24px_60px_-12px_rgba(61,43,31,0.35)]"
    >
      {backgroundImageUrl.startsWith("http") ? (
        // eslint-disable-next-line @next/next/no-img-element
        <img
          src={backgroundImageUrl}
          alt=""
          className="absolute inset-0 h-full w-full object-cover object-center"
        />
      ) : (
        <Image
          src={backgroundImageUrl}
          alt=""
          fill
          priority
          unoptimized={isUploadAssetPath(backgroundImageUrl)}
          className="object-cover object-center"
          sizes="100vw"
        />
      )}
      <div
        className={
          textOverImage
            ? "absolute inset-0 bg-gradient-to-t from-chocolat via-chocolat/75 to-chocolat/25"
            : "absolute inset-0 bg-gradient-to-t from-chocolat/30 via-transparent to-transparent"
        }
        aria-hidden
      />
      {textOverImage ? (
        <div className="relative mx-auto max-w-6xl px-4 pb-16 pt-32 sm:px-6 sm:pb-24">
          <p className="mb-3 text-sm font-semibold uppercase tracking-[0.2em] text-gaufre">
            {eyebrow}
          </p>
          <h1 className="mb-4 max-w-3xl text-4xl font-bold leading-tight tracking-tight text-white drop-shadow-sm sm:text-5xl md:text-6xl">
            {title}
          </h1>
          <p className="mb-10 max-w-xl text-lg text-white/90">{subtitle}</p>
          <div className="flex flex-wrap gap-4">
            <MenuTextureButton href="/#menu">Voir le menu</MenuTextureButton>
            <MenuTextureButton href="/#ou-me-trouver">
              Où me trouver
            </MenuTextureButton>
          </div>
        </div>
      ) : null}
    </section>
  );
}
