"use client";
import { tinaField } from "tinacms/dist/react";
import { Menu, X } from "lucide-react";
import { Section } from "@wp2/ui/dist/section";
import { LangSelector } from "./lang-selector";
import { useLocalize } from "@wp2/helpers/dist/client";
import { Image } from "@wp2/ui/dist/image";
import { Link } from "@wp2/ui/dist/link";
import { useState } from "react";
import { createBlock } from "../create";
import { Button } from "@wp2/ui/dist/button";
export const MobileHeader = createBlock(({ global, data }) => {
    const [open, setOpen] = useState(false);
    const localize = useLocalize();
    if (!data)
        return null;
    return (<Section id="header" className="flex-row items-center h-mobile-header justify-between relative z-30 md:hidden">
      <Link href={"/"} data-tina-field={tinaField(global, "logo")}>
        <Image priority width={120} height={120} src={global.logo || undefined} alt="Logo" className="object-contain"/>
      </Link>
      <label onClick={() => setOpen(!open)} htmlFor="menu-toggle" className="cursor-pointer flex p-2 h-10 w-10 rounded-full bg-primary">
        <Menu className="h-full w-full text-background"/>
      </label>
      {open && (<nav id="menu" className="fixed top-0 left-0 h-full w-full bg-background">
          <div className="flex flex-col items-center py-10 justify-between h-full">
            <div className="flex flex-col items-center gap-7">
              <Link href={"/"} data-tina-field={tinaField(global, "logo")}>
                <Image width={120} height={120} src={global.logo || undefined} alt="Logo" className="object-contain"/>
              </Link>
              {global.nav?.map((item, i) => item ? (<Button variant={data.navVariant} data-tina-field={tinaField(item, "label")} key={i} href={item?.href}>
                    {localize(item?.label)}
                  </Button>) : null)}
            </div>
            <div className="flex flex-col items-center gap-7">
              {data.cta && (<Link className="border uppercase border-primary p-2 rounded-md text-primary text-sm" data-tina-field={tinaField(data, "cta")} href={data.cta.url}>
                  <Button variant={data.cta.variant}>{localize(data.cta.label)}</Button>
                </Link>)}
              <LangSelector />
              <label onClick={() => setOpen(!open)} className="cursor-pointer block text-foreground">
                <X />
              </label>
            </div>
          </div>
        </nav>)}
    </Section>);
});