import React, { useEffect, useRef, useState } from "react";
import { FaBars, FaChevronRight, FaUser, FaX } from "react-icons/fa6";
import { SideNavContent } from "./SideNavContent";
import { motion } from "framer-motion"
export const TopNavBottom = () => {
    const sideNav = useRef()
    const [SideNav, setSideNav] = useState(false);
    useEffect(() => {
      document.body.addEventListener("click", (e)=>{
        if(e.target.contains(sideNav.current)){
            setSideNav(false)
        }
      })
    }, [sideNav, SideNav])
    
  return (
    <div className="w-full px-4 h-[36px] bg-brown text-white flex items-center">
      <ul className="mdl:max-w-container mdl:mx-auto flex items-start mdl:items-center gap-2 text-sm tracking-wide">
        <li
          onClick={() => setSideNav(true)}
          className="headerHover flex items-center gap-1"
        >
          <FaBars /> All
        </li>
        <li className="headerHover hidden mdl:inline-flex">Today's Deals</li>
        <li className="headerHover hidden mdl:inline-flex">Customer Service</li>
        <li className="headerHover hidden mdl:inline-flex">Gift Cards</li>
        <li className="headerHover hidden mdl:inline-flex">Registry</li>
      </ul>
      {SideNav && (
        <div className="w-full h-screen text-black dark:text-white fixed top-0 left-0 bg-darkBrown bg-opacity-50">
          <div className="w-full h-full relative">
            <motion.div ref={sideNav} initial={{x:-500, opacity: 0}} animate={{x:0, opacity:1}} transition={{duration:0.5}} className="w-full md:w-[350px] h-full bg-gray-100 border border-black dark:bg-gray-900 dark:border-gray-600">
              <div className="w-full bg-darkBrown text-white py-2 px-6 flex items-center gap-4">
                <FaUser />
                <h3 className="w-full font-titleFont font-bold text-lg tracking-wide">
                  Hello, please sign in
                </h3>
                <span onClick={()=>setSideNav(false)} className="cursor-pointer self-end py-2 px-4 border border-white rounded-sm">
                <FaX />
                </span>
              </div>
              <SideNavContent
                title="Camping Supplies"
                items={[
                  { title: "Tents" },
                  { title: "Cordage" },
                  { title: "Hatchets" },
                  { title: "Stoves" },
                ]}
              />
              <SideNavContent
                title="Prepping"
                items={[
                  { title: "Food" },
                  { title: "Bugout" },
                  { title: "Radio equipment" },
                  { title: "Geiger counters" },
                  { title: "Books" },
                ]}
              />
              <SideNavContent
                title="Fishing"
                items={[
                  { title: "Baits" },
                  { title: "Line" },
                  { title: "Nets" },
                  { title: "Rods and reels" },
                ]}
              />
              <SideNavContent
                title="Hunting"
                items={[
                  { title: "Clothing" },
                  { title: "Cordage" },
                  { title: "Hatchets" },
                  { title: "Stoves" },
                ]}
              />
            </motion.div>
          </div>
        </div>
      )}
    </div>
  );
};