import Image from "next/image";
import { brands } from "@/lib/data";
import { Carousel } from "./Carousel";

export function Brands() {
  return (
    <section className="container-site mt-12">
      <h2 className="section-title mb-6">برندها</h2>
      <Carousel ariaLabel="برندها">
        {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>
  );
}