import { Container } from "@/components/Container";
import { Placeholder } from "@/components/Placeholder";
import { SlotLink } from "@/components/SlotLink";
import { glossyBar } from "@/lib/glossy";
import { parseAspectRatio } from "@/lib/static-images";
import type { SlotMediaItem } from "@/lib/static-images";

const fallbackCopy = {
  kicker: "Contact us",
  title: "اگر به دنبال قطعه ی خاصی هستید، با ما تماس بگیرید.",
  href: "/contact",
};

export function WideBanner({ image, aspectRatio }: { image?: SlotMediaItem; aspectRatio?: string }) {
  const src = image?.image ?? "/images/banners/wide.jpg";
  const href = image?.href || fallbackCopy.href;
  const ratio = parseAspectRatio(aspectRatio);

  return (
    <section
      className={`relative overflow-hidden ${ratio ? "min-h-[280px]" : "h-[280px] sm:h-[360px]"}`}
      style={ratio ? { aspectRatio: ratio } : undefined}
    >
      <SlotLink href={href} className="absolute inset-0">
        <Placeholder
          src={src}
          fallbackSrc={image?.fallbackSrc ?? "/images/banners/wide.jpg"}
          alt=""
          className="h-full w-full object-cover"
        />
        <span className="absolute inset-0 bg-ink/20" />
      </SlotLink>
      <Container className="relative flex h-full items-center">
        <div className="max-w-xl rounded-2xl px-8 py-7" style={glossyBar}>
          <p className="font-latin text-[10px] font-bold tracking-[0.32em] text-white/60 uppercase">
            {image?.kicker || fallbackCopy.kicker}
          </p>
          <p className="mt-3 text-[22px] font-bold leading-9 text-white sm:text-[26px]">
            {image?.title || fallbackCopy.title}
          </p>
          {image?.text ? <p className="mt-2 text-[14px] leading-7 text-white/75">{image.text}</p> : null}
          <SlotLink
            href={href}
            className="mt-5 inline-flex rounded-xl bg-brand px-6 py-3 text-[14px] font-medium text-white hover:bg-brand-dark"
          >
            تماس با ما
          </SlotLink>
        </div>
      </Container>
    </section>
  );
}