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";

export function BannerRow({
  banners,
  columns,
  aspectRatio,
}: {
  banners: SlotMediaItem[];
  columns: 2 | 3;
  aspectRatio?: string;
}) {
  const ratio = parseAspectRatio(aspectRatio);

  return (
    <section className="pb-4">
      <Container>
        <div className={`grid gap-5 ${columns === 3 ? "md:grid-cols-3" : "md:grid-cols-2"}`}>
          {banners.map((banner) => (
            <SlotLink key={banner.id} href={banner.href} className="group relative block">
              <div
                className={`relative overflow-hidden rounded-2xl ${
                  ratio ? "min-h-[180px]" : columns === 3 ? "aspect-[4/3]" : "aspect-[16/8] min-h-[220px]"
                }`}
                style={ratio ? { aspectRatio: ratio } : undefined}
              >
                <Placeholder
                  src={banner.image}
                  fallbackSrc={banner.fallbackSrc}
                  alt={banner.title ?? ""}
                  className="h-full w-full object-cover transition-transform duration-700 group-hover:scale-105"
                />
                {(banner.title || banner.kicker || banner.text) && (
                  <div
                    className="absolute inset-x-3 bottom-3 z-10 overflow-hidden rounded-2xl px-4 py-3 sm:px-5"
                    style={glossyBar}
                  >
                    <div dir="rtl" className="flex min-h-[2.5rem] items-center gap-3">
                      {banner.title ? (
                        <h3 className="min-w-0 truncate text-[14px] font-bold text-white sm:text-[16px]">
                          {banner.title}
                        </h3>
                      ) : null}
                      {banner.kicker ? (
                        <>
                          <span className="h-5 w-px shrink-0 bg-white/20" />
                          <p className="font-latin shrink-0 text-[10px] tracking-[0.22em] text-white/60 uppercase">
                            {banner.kicker}
                          </p>
                        </>
                      ) : null}
                    </div>
                    {banner.text ? (
                      <div className="grid grid-rows-[0fr] transition-[grid-template-rows] duration-500 ease-out group-hover:grid-rows-[1fr]">
                        <div className="min-h-0 overflow-hidden">
                          <p className="pt-1 pb-1 text-right text-[13px] leading-7 text-white/75">{banner.text}</p>
                        </div>
                      </div>
                    ) : null}
                  </div>
                )}
              </div>
            </SlotLink>
          ))}
        </div>
      </Container>
    </section>
  );
}