import { NavLink } from 'react-router-dom';
import { LayoutDashboard, Package, ShoppingCart, Users, LogOut } from 'lucide-react';
import useAuthStore from '../../store/authStore';

const Sidebar = () => {
  const { logout } = useAuthStore();

  const navItems = [
    { path: '/dashboard', icon: LayoutDashboard, label: 'Dashboard' },
    { path: '/products', icon: Package, label: 'Products' },
    { path: '/sales', icon: ShoppingCart, label: 'Sales' },
    { path: '/customers', icon: Users, label: 'Customers' },
  ];

  return (
    <aside className="w-56 min-h-screen bg-blue-600 text-white flex flex-col">
      <div className="p-4 bg-blue-700">
        <h1 className="text-xl font-bold">My Shop POS</h1>
      </div>
      <nav className="flex-1 p-3">
        <ul className="space-y-1">
          {navItems.map(({ path, icon: Icon, label }) => (
            <li key={path}>
              <NavLink
                to={path}
                className={({ isActive }) =>
                  `flex items-center gap-3 px-3 py-2 rounded-lg ${
                    isActive ? 'bg-blue-800' : 'hover:bg-blue-700'
                  }`
                }
              >
                <Icon className="w-5 h-5" />
                <span>{label}</span>
              </NavLink>
            </li>
          ))}
        </ul>
      </nav>
      <div className="p-3">
        <button
          onClick={logout}
          className="flex items-center gap-3 w-full px-3 py-2 rounded-lg hover:bg-blue-700"
        >
          <LogOut className="w-5 h-5" />
          <span>Logout</span>
        </button>
      </div>
    </aside>
  );
};

export default Sidebar;
