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

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

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

  return (
    <section className="relative h-[160px] overflow-hidden bg-ink sm:h-[200px]">
      <SlotLink href={href} className="absolute inset-0">
        <Placeholder
          src={src}
          fallbackSrc={image?.fallbackSrc ?? "/images/banners/wide.jpg"}
          alt={image?.title || fallbackCopy.title}
          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-6 py-4 sm:px-8 sm:py-5" 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-1.5 line-clamp-2 text-[18px] font-bold leading-7 text-white sm:text-[22px]">
            {image?.title || fallbackCopy.title}
          </p>
          <SlotLink
            href={href}
            className="mt-3 inline-flex rounded-xl bg-brand px-5 py-2.5 text-[13px] font-medium text-white hover:bg-brand-dark"
          >
            تماس با ما
          </SlotLink>
        </div>
      </Container>
    </section>
  );
}