"use client";
import { tinaField } from "tinacms/dist/react";
import { Section } from "@wp2/ui/dist/section";
import { cn } from "@wp2/helpers";
import { LangSelector } from "./lang-selector";
import { useLocalize } from "@wp2/helpers/dist/client";
import { Button } from "@wp2/ui/dist/button";
import { Image } from "@wp2/ui/dist/image";
import { Link } from "@wp2/ui/dist/link";
import { SocialIcon } from "./social-icon";
import { createBlock } from "../create";
import { useSlugs } from "@wp2/helpers/dist/client";
export const DEFAULT_FILENAME = "home";
export const DesktopHeader = createBlock(({ data: header, global }) => {
    const localize = useLocalize();
    const { filename } = useSlugs();
    return (<Section id="header" className2="px-10" className="z-30 relative flex-row max-w-none justify-between items-center px-0 h-header w-full hidden md:flex">
      <div className="flex items-center gap-10">
        <Link href={"/"} data-tina-field={tinaField(global, "logo")}>
          <Image priority width={165} height={55} src={global.logo || undefined} alt="Logo" className="object-contain"/>
        </Link>
        <div className="flex gap-5">
          {global.nav?.map((item, i) => item ? (<Button variant={header.navVariant} data-tina-field={tinaField(item, "label")} key={i} href={item?.href}>
                {localize(item?.label)}
              </Button>) : null)}
        </div>
      </div>
      <div className={cn("flex gap-6 items-center", filename === DEFAULT_FILENAME ? "text-background" : "text-primary")}>
        <div className="flex gap-2">
          {global.social?.map((item) => (<SocialIcon item={item || undefined} key={item?.platform} className="flex"/>))}
        </div>
        <LangSelector className="flex"/>
        {header.cta && (<Button variant={header.cta.variant} href={header.cta.url} data-tina-field={tinaField(header, "cta")}>
            {localize(header.cta.label)}
          </Button>)}
      </div>
    </Section>);
});