import Image from "next/image";
import { SlotImage } from "@/components/SlotImage";
import { brands } from "@/lib/data";
import type { StaticImageWithUrl } from "@/lib/static-images";
import { slotAlt, slotAspectStyle } from "@/lib/static-images";
import { Carousel } from "./Carousel";

type Props = {
  images?: StaticImageWithUrl[];
  aspectRatio?: string;
};

export function Brands({ images = [], aspectRatio }: Props) {
  return (
    <section className="container-site mt-12">
      <h2 className="section-title mb-6">برندها</h2>
      <Carousel ariaLabel="برندها">
        {images.length > 0
          ? images.map((image) => {
              const card = (
                <div
                  className="snap-start shrink-0 w-[168px] sm:w-[196px] rounded-xl bg-white border border-black/5 grid place-items-center px-3"
                  style={slotAspectStyle(aspectRatio, "2:1")}
                >
                  <SlotImage
                    image={{ ...image, linkUrl: null }}
                    alt={slotAlt(image, "برند")}
                    imgClassName="max-h-[72px] w-auto object-contain"
                  />
                </div>
              );
              return image.linkUrl ? (
                <a key={image.id} href={image.linkUrl} className="snap-start shrink-0">
                  {card}
                </a>
              ) : (
                <div key={image.id}>{card}</div>
              );
            })
          : brands.map((brand) => (
              <div
                key={brand.name}
                className="snap-start shrink-0 w-[168px] sm:w-[196px] h-[108px] rounded-xl bg-white border border-black/5 grid place-items-center px-3"
              >
                <Image
                  src={brand.image}
                  alt={brand.name}
                  width={180}
                  height={80}
                  className="max-h-[72px] w-auto object-contain"
                />
              </div>
            ))}
      </Carousel>
    </section>
  );
}