import Image from "next/image";

import { Tag } from "components/tag";
import { IconsSlider } from "./comps/icons-slider";

// import { Editor } from "components/editor";
// import { ArrayOfIcons } from "components/svg/icons";

// import { Navigation } from "components/navigation";

import Background from "assets/images/header/background.svg";
import Stars from "assets/images/header/stars.svg";
import Ananas from "assets/images/header/ananas.svg";
import Pizza from "assets/images/header/pizza.svg";
import { FormattedMessage, useIntl } from "react-intl";

export const Header = ({ children }: any) => {
  const intl = useIntl();
  return (
    <header className="bg-white relative z-20">
      <div className="z-1 px-6 pt-28">
        <div className="container mx-auto relative">
          <div className="max-w-[1051px] w-full mx-auto text-center">
            <Tag
              label={`${intl.formatMessage({ id: "badge.new" })} 🔥`}
              className="mb-5"
            >
              NEW FEATURE AVAILABLE
            </Tag>
            <IconsSlider />
            <div className="max-w-max relative mx-auto md:px-12 pt-3 z-1 mt-2">
              <h1 className="text-white font-title font-black text-4xl md:text-[70px] !leading-none text-center">
                <FormattedMessage
                  id="badgeEditor.header.title"
                  values={{ span: () => <br /> }}
                />{" "}
                ✨
              </h1>
              <Image
                width={32}
                height={32}
                src={Stars}
                className="absolute top-0 left-0 w-full pointer-events-none"
                alt="Stars on title"
              />
            </div>
            <h2 className="text-white font-medium text-center mt-5 text-lg md:text-[26px] tracking-wide">
              <FormattedMessage id="badgeEditor.header.subtitle" />
            </h2>
            <p className="text-white text-opacity-70 text-sm mt-2">
              <FormattedMessage id="footer.legal2" />
            </p>
          </div>
          {children}
        </div>
      </div>
      <div className="absolute top-0 left-0 h-full max-h-[875px] bg-blue -z-1 w-full">
        <Image
          width={32}
          height={32}
          alt="Pizza with sauce"
          src={Pizza}
          className="w-[90px] lg:w-[120px] opacity-60 lg:opacity-100 absolute select-none left-10 lg:left-20 top-32 lg:top-1/3 pointer-events-none  block"
        />
        <Image
          width={32}
          height={32}
          alt="Ananas party!"
          src={Ananas}
          className="w-[150px] absolute select-none bottom-20 right-16 pointer-events-none hidden lg:block"
        />
        <Image
          width={32}
          height={32}
          alt="Background header cloud"
          src={Background}
          className="w-full absolute select-none bottom-0 left-0 pointer-events-none -z-1 opacity-50"
        />
      </div>
      {/* <div className="bg-blue h-full w-full absolute top-0 left-0 -z-1">
      </div> */}
    </header>
  );
};