import { RiSearchLine } from "react-icons/ri";
import { Button } from "../ui/button";
import MainNav from "./MainNav";
import ShortLogo from "./ShortLogo";
import GlobalSearch from "../shared/GlobalSearch";
import MobileNav from "./MobileNav";
import Notification from "../notification";
import GetProButton from "../shared/GetProButton";
import { useEffect, useState } from "react";

const MainHeader = ({ open, setOpen }) => {
  const [showLicense, setShowLicense] = useState(false);
  useEffect(() => {
    const url = new URL(window.location.href);
    const license = url.searchParams.get("aae-license");
    if (license === "1") {
      setShowLicense(true);
    }
  }, []);

  return (
    <div className="flex justify-between items-center gap-3 px-4 py-5 sm:gap-6 sm:px-8 border-b border-border-secondary">
      <div>
        <ShortLogo />
      </div>
      <div className="hidden xl:block flex-1">
        <MainNav />
      </div>
      <div className="flex gap-2.5 max-w-[400px]">
        <Button variant="secondary" size="icon" onClick={() => setOpen(true)}>
          <RiSearchLine size={20} />
        </Button>
        {/* <Button variant="secondary" size="icon" className="relative">
          <Badge className="absolute top-[9px] right-2" variant="solid" />
          <RiNotificationLine size={20} />
        </Button> */}
        <Notification />
        <div className="block xl:hidden">
          <MobileNav />
        </div>
        <GetProButton showLicense={showLicense} />
      </div>
      <GlobalSearch open={open} setOpen={setOpen} />
    </div>
  );
};

export default MainHeader;