import React from "react";
import { Menu, X } from "lucide-react";

function Sidebar({ isOpen, toggleSidebar }) {
  return (
    <aside 
      className={`
        bg-gray-800 text-white p-5 w-64 fixed top-0 left-0 z-40
        transform transition-transform duration-200 ease-in-out
        ${isOpen ? "translate-x-0" : "-translate-x-full"}
        md:static md:translate-x-0
      `}
    >
      <div className="flex justify-between items-center md:hidden mb-4">
        <h2 className="text-xl font-bold">Admin Panel</h2>
        <button onClick={toggleSidebar} className="focus:outline-none">
          <X size={24} />
        </button>
      </div>
      <div className="hidden md:block mb-4">
        <h2 className="text-xl font-bold">Admin Panel</h2>
      </div>
      <nav>
        <ul className="list-none p-0">
          <li className="mb-3">
            <a
              className="text-white no-underline hover:underline"
              href="/dashboard"
            >
              Tableau de bord
            </a>
          </li>
          <li className="mb-3">
            <a className="text-white no-underline hover:underline" href="/user">
              Utilisateurs
            </a>
          </li>
          <li className="mb-3">
            <a
              className="text-white no-underline hover:underline"
              href="/adminobjet"
            >
              Gestion des objets
            </a>
          </li>
        </ul>
      </nav>
    </aside>
  );
}

export default Sidebar;