import Image from "next/image";
import { partners } from "@/data/home";

export function Partners() {
  return (
    <section className="section !py-[30px]">
      <div className="container-page">
        <div className="mx-auto grid max-w-4xl grid-cols-1 gap-8 sm:grid-cols-3 sm:gap-6">
          {partners.map((partner) => (
            <a
              key={partner.name}
              href={partner.href}
              className="flex flex-col items-center text-center"
              title={partner.name}
            >
              <div className="mb-3 flex items-center justify-center">
                <Image
                  src={partner.image}
                  alt={partner.country}
                  width={150}
                  height={80}
                  unoptimized
                  className="object-contain"
                  style={{ width: 150, height: 80 }}
                />
              </div>
              <span className="text-[15px] font-medium text-[#333]">
                {partner.country}
              </span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}
