import { tinaField } from "tinacms/dist/react";
import { Section } from "@wp2/ui/dist/section";
import { cn } from "@wp2/helpers";
import { useLocalize } from "@wp2/helpers/dist/client";
import { createBlock } from "../create";
import { Image } from "@wp2/ui/dist/image";
import { Text } from "@wp2/ui/dist/text";
export const Partners = createBlock(({ data }) => {
    const localize = useLocalize();
    const partners = data.partners;
    return (<Section id="partners" className="flex flex-col items-center py-20 gap-10">
      <Text variant={data.title?.variant} className="text-xl uppercase font-bold" data-tina-field={tinaField(data, "title")}>
        {localize(data.title?.text)}
      </Text>
      <div className="grid grid-cols-2 gap-10 md:grid-cols-5 place-items-center w-full">
        {partners &&
            partners.map((p, i) => p ? (<Image width={220} height={120} alt={`Partner ${i}`} key={i} data-tina-field={tinaField(p, "image")} src={p?.image || undefined} className={cn("object-contain", i === partners.length - 1 && partners.length % 2 === 1 ? "col-span-2 md:col-span-1" : "")}/>) : null)}
      </div>
    </Section>);
});