"use client";
import { tinaField } from "tinacms/dist/react";
import { Section } from "@wp2/ui/dist/section";
import { LangSelector } from "../header/lang-selector";
import { Image } from "@wp2/ui/dist/image";
import { useLocalize } from "@wp2/helpers/dist/client";
import { SocialIcon } from "../header/social-icon";
import { createBlock } from "../create";
import { Text } from "@wp2/ui/dist/text";
import { Button } from "@wp2/ui/dist/button";
export const Footer = createBlock(({ global, data: footer }) => {
    const localize = useLocalize();
    if (!footer)
        return null;
    return (<Section id="footer" className="flex flex-col w-full py-10 gap-10" className2="mt-auto">
      <div className="flex flex-col items-center md:grid md:grid-cols-5 w-full gap-3 ">
        <Image width={120} height={120} className="object-contain" data-tina-field={tinaField(global, "logo")} src={global.logo || undefined} alt="Logo"/>
        <div className="flex items-center gap-3 col-span-3 justify-center">
          {global?.nav?.map((item, i) => (<Button variant={footer.navVariant} key={i} data-tina-field={item ? tinaField(item, "label") : undefined} href={item?.href}>
              {localize(item?.label)}
            </Button>))}
        </div>
        <div className="flex items-center gap-3 justify-end">
          {global.social?.map((item, i) => (<SocialIcon key={i} className="text-primary" item={item || undefined}/>))}
        </div>
      </div>
      <div className="flex flex-col md:flex-row gap-3 items-center text-sm justify-between">
        <Text variant={footer.copyrigth?.variant} data-tina-field={tinaField(footer, "copyrigth")}>
          © {new Date().getFullYear()} {localize(footer.copyrigth?.text)}
        </Text>
        <LangSelector />
      </div>
    </Section>);
});