'use client'
import React, { useContext, useEffect, useState } from "react";
import Link from "next/link";
import { menuItems } from "@/utils";
import ProductContext from "@/app/contexts/productContext";

const FullWidthMenu = ({  isOpen, onClose, isScrolled }) => {
  const [isRendered, setIsRendered] = useState(false);
  const { category } = useContext(ProductContext);



  const categoryItems = category?.map((category) => ({
    label: category.category_name,
    url: `/collections/${category.id}`,
  })) || []

  useEffect(() => {
    if (isOpen) {
      setIsRendered(true);
    } else {
      const timer = setTimeout(() => setIsRendered(false), 300); // Match this with the transition duration
      return () => clearTimeout(timer);
    }
  }, [isOpen]);

  if (!isRendered && !isOpen) {
    return null;
  }

  return (
    <div
      className={`fixed ${
        isScrolled ? "top-24" : "top-36"
      } left-0 max-w-[100%] w-full sm:h-full h-[90vh] hide-navbar overflow-y-scroll text-slate-900 bg-white z-40 shadow-md transition-transform duration-300 ease-in ${
        isOpen ? "translate-x-0" : "-translate-x-full "
      } `}
    >
      {/* hidden items only show on mobile devices */}
      <div className="flex flex-col space-y-8 sm:hidden ml-7 border-b py-6">
        {categoryItems.map((item) => (
          <category
            key={item.label}
            href={item.url}
            className="text-2xl font-medium hover:text-[#AC8C6B] transition-colors"
            onClick={onClose}
          >
            {item.label}
          </category>
        ))}
      </div>
      <div className="container mx-auto sm:py-20 py-7 px-6 flex sm:gap-44 md:gap-36 gap-7 sm:flex-row md:flex-row flex-col">
        {/* left section */}
        <div className="sm:h-[70vh] flex flex-col p-3 justify-evenly sm:gap-8 gap-7 sm:ml-10 sm:border-b pb-8">
          {menuItems.map((menuItem, index) => (
            <Link href={menuItem.link} key={index} onClick={onClose}>
              <h2 className="text-xl font-semibold text-slate-900 hover:text-[#AC8C6B] transition-colors">
                {menuItem.name}
              </h2>
            </Link>
          ))}
        </div>

        {/* right section */}
        <div className="flex flex-col p-3 justify-evenly sm:gap-3 gap-7 sm:ml-10 min-h-[300px]">
          {categoryItems?.map((item) => (
            <Link href={item.url} key={item.id} onClick={onClose}>
              <h2 className="text-xl font-semibold text-slate-900">
                {item.label}
              </h2>
            </Link>
          ))}
        </div>
      </div>
    </div>
  );
};

export default FullWidthMenu;