"use client";
import React, { useState } from "react";
import { Partners } from "@/shared/types/partners";
import Image from "next/image";
import PartnerModal from "@/features/partners/ui/partners-section/partner-modal";
import { useTranslations } from "next-intl";

interface PartnersSectionProps {
  partners: Partners[];
}

const PartnersSection = ({ partners }: PartnersSectionProps) => {
  const t = useTranslations("")
  const [selectedPartner, setSelectedPartner] = useState<Partners | null>(null);
  return (
    <div className={"my-container section-wrapper min-h-[70vh]"}>
      <h1 className={"section-title text-center"}>{t("Hamkorlik")}</h1>
      <div
        className={
          "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 mx-4 md:mx-0 gap-6 mt-12"
        }
      >
        {partners.map((partner) => (
          <div
            key={partner.id}
            onClick={() => {
              setSelectedPartner(partner);
            }}
            className={
              "cursor-pointer border hover:border-primary transition-all duration-400 bg-white p-12 w-full flex flex-col justify-center items-center gap-2 h-full"
            }
          >
            <Image
              src={partner.image}
              alt={partner.name}
              width={100}
              height={100}
            />
            <h1 className={"text-xl font-bold text-center"}>{partner.name}</h1>
          </div>
        ))}
        {selectedPartner && (
          <PartnerModal
            selectedPartner={selectedPartner!}
            setSelectedPartner={setSelectedPartner}
          />
        )}
      </div>
    </div>
  );
};
export default PartnersSection;
