import Image from "next/image";
import type {
  HomepageItemDto,
  PartnersSectionContent,
} from "@/app/lib/content";

export default function PartnersSection({
  section,
  partners,
}: {
  section: PartnersSectionContent;
  partners: HomepageItemDto[];
}) {
  return (
    <section className="site-container py-6 md:py-8">
      <div className="rounded-3xl border border-[#d6e1ff] bg-white p-5 md:p-7">
        <div className="flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
          <div>
            <p className="text-xs uppercase tracking-[0.12em] text-[#4a63c6]">
              {section.label}
            </p>
          </div>
        </div>

        <div className="mt-5 grid grid-cols-2 gap-3 md:grid-cols-4 md:gap-4">
          {partners.map((partner) => (
            <article
              key={partner.id}
              className="relative overflow-hidden border border-[#dce5ff] bg-white"
            >
              <div className="relative h-28 md:h-32 bg-white p-2">
                <Image
                  src={partner.imageUrl}
                  alt={partner.altText || `${partner.label} logo`}
                  fill
                  sizes="(min-width: 768px) 23vw, 45vw"
                  className="object-contain"
                />
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}
