import { Partner } from "@/types/Home";
import CompanyLogo from "./CompanyLogo";

const companies = [
  {
    src: "/images/our-founding-and-companies/kafd-logo.svg",
    alt: "logo1",
    link: "#",
  },
  {
    src: "/images/our-founding-and-companies/ministry-of-culture-logo.svg",
    alt: "logo2",
    link: "#",
  },
  {
    src: "/images/our-founding-and-companies/creative-media-logo.svg",
    alt: "logo3",
    link: "#",
  },
  {
    src: "/images/our-founding-and-companies/creative-districts-logo.svg",
    alt: "logo4",
    link: "#",
  },
];

export default function CompaniesGrid({
  partnersData,
}: {
  partnersData: Partner[];
}) {
  const dataToUse =
    partnersData && partnersData.length > 0 ? partnersData : companies;

  return (
    <div className="grid grid-cols-2 md:grid-cols-4 gap-4 xl:gap-40 w-full">
      {dataToUse.map((item, index) => {
        const isPartner = "id" in item && "name" in item;

        return (
          <CompanyLogo
            key={index}
            src={
              isPartner
                ? (item as Partner).image || null
                : (item as (typeof companies)[0]).src
            }
            alt={
              isPartner
                ? (item as Partner).name
                : (item as (typeof companies)[0]).alt
            }
            link={
              isPartner
                ? (item as Partner).link
                : (item as (typeof companies)[0]).link
            }
          />
        );
      })}
    </div>
  );
}