import { NavLink } from 'react-router-dom';
import { LayoutDashboard, Package, ShoppingCart, Users, Settings, Box } from 'lucide-react';
import { MadeWithDyad } from './made-with-dyad';

const Sidebar = () => {
  const navLinkClasses = ({ isActive }: { isActive: boolean }) =>
    `flex items-center px-4 py-2 rounded-lg transition-colors duration-200 ${
      isActive
        ? 'bg-blue-500 text-white'
        : 'text-gray-700 hover:bg-gray-200'
    }`;

  return (
    <aside className="w-64 flex-shrink-0 bg-white p-4 hidden md:flex flex-col">
      <div>
        <div className="flex items-center mb-8">
          <Box className="h-8 w-8 text-blue-600 mr-2" />
          <h1 className="text-xl font-bold text-gray-800">JEI Stock Take</h1>
        </div>
        <nav className="space-y-2">
          <NavLink to="/" className={navLinkClasses} end>
            <LayoutDashboard className="mr-3 h-5 w-5" />
            Dashboard
          </NavLink>
          <NavLink to="/stock" className={navLinkClasses}>
            <Package className="mr-3 h-5 w-5" />
            Stock List
          </NavLink>
          <NavLink to="/book-out" className={navLinkClasses}>
            <ShoppingCart className="mr-3 h-5 w-5" />
            Book Out Stock
          </NavLink>
          <NavLink to="/customers" className={navLinkClasses}>
            <Users className="mr-3 h-5 w-5" />
            Customers
          </NavLink>
          <NavLink to="/settings" className={navLinkClasses}>
            <Settings className="mr-3 h-5 w-5" />
            Settings
          </NavLink>
        </nav>
      </div>
      <div className="mt-auto">
        <MadeWithDyad />
      </div>
    </aside>
  );
};

export default Sidebar;