import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { useTheme } from '../Theme/ThemeContext';
import { MdMenu, MdClose } from 'react-icons/md'; // Ensure you have these icons imported

const Sidebar = ({ links }) => {
  const [isOpen, setIsOpen] = useState(true); // Initially open for desktop view
  const [openDropdown, setOpenDropdown] = useState(null);
  const { theme } = useTheme();

  const sidebarBgClass = theme === 'dark' ? 'bg-gray-900' : 'bg-white';
  const buttonBaseClass = 'flex items-center p-2 space-x-3 rounded-md w-full justify-between transition-colors duration-300';
  const buttonLightClass = 'bg-blue-500 hover:bg-red-500 text-white';
  const buttonDarkClass = 'bg-blue-500 hover:bg-red-500 text-black';

  const toggleSidebar = () => setIsOpen(!isOpen);

  return (
    <div className="flex h-full min-h-[600px] border border-black">
      {/* Mobile view toggle button */}
      <button className="p-4 md:hidden z-30" onClick={toggleSidebar}>
        {isOpen ? <MdClose className="text-4xl" /> : <MdMenu className="text-4xl" />}
      </button>
      {/* Sidebar */}
      <aside className={`${isOpen ? 'block' : 'hidden'} md:block ${sidebarBgClass} w-64 h-screen fixed md:static z-20`}>
        {/* Desktop view close button inside the sidebar */}
        <div className="flex justify-end md:visible invisible p-4">
          <button onClick={()=>toggleSidebar}>
            <MdClose className="text-2xl" /> {/* Smaller icon size for desktop */}
          </button>
        </div>
        <div className="px-3 py-4 overflow-y-auto w-full">
          <ul className="space-y-2">
            {links?.map((link, index) => (
              <li key={index} className={link.dropdown ? "dropdown" : ""}>
                <button 
                  onClick={() => setOpenDropdown(openDropdown === index ? null : index)}
                  className={`${buttonBaseClass} ${theme === 'dark' ? buttonDarkClass : buttonLightClass} text-center hover:border hover:border-white`}
                >
                  {link.icon && React.createElement(link.icon, { className: "w-5 h-5" })}
                  <span className={`text-center`}>{link.name}</span>
                  {link.dropdown && <span>&gt;</span>}
                </button>
                {link.dropdown && openDropdown === index && (
                  <ul className="pl-4">
                    {link.dropdown.map((sublink, subIndex) => (
                      <li key={subIndex}>
                        <Link 
                          to={sublink.href} 
                          className="flex items-center p-2 hover:bg-red-500 dark:hover:bg-red-600 rounded-lg mt-2 hover:border hover:border-white"
                        >
                          {sublink.icon && React.createElement(sublink.icon, { className: "w-4 h-4 mr-2" })}
                          {sublink.name}
                        </Link>
                      </li>
                    ))}
                  </ul>
                )}
              </li>
            ))}
          </ul>
        </div>
      </aside>
      {/* Optional overlay for mobile */}
      {isOpen && <div className="fixed inset-0 z-10 bg-black bg-opacity-50 md:hidden" onClick={toggleSidebar}></div>}
    </div>
  );
};

export default Sidebar;