import { Link, useLocation } from 'react-router';
import { LayoutDashboard, ShoppingBag, Star, Users, FileText } from 'lucide-react';

const navItems = [
  { path: '/admin', label: 'Dashboard', icon: LayoutDashboard },
  { path: '/admin/orders', label: 'Заказы', icon: ShoppingBag },
  { path: '/admin/reviews', label: 'Отзывы', icon: Star },
  { path: '/admin/users', label: 'Пользователи', icon: Users },
  { path: '/admin/info', label: 'Информация', icon: FileText }
];

export function AdminSidebar() {
  const location = useLocation();

  return (
    <aside className="w-64 bg-card border-r border-border min-h-screen p-6">
      <Link to="/admin" className="block mb-8">
        <h2 className="text-xl text-foreground">Админ-панель</h2>
      </Link>

      <nav className="space-y-2">
        {navItems.map(item => {
          const Icon = item.icon;
          const isActive = location.pathname === item.path;

          return (
            <Link
              key={item.path}
              to={item.path}
              className={`flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-200 ${
                isActive
                  ? 'bg-primary text-primary-foreground shadow-md'
                  : 'text-muted-foreground hover:bg-muted hover:text-foreground'
              }`}
            >
              <Icon className="w-5 h-5" />
              <span className="text-sm">{item.label}</span>
            </Link>
          );
        })}
      </nav>
    </aside>
  );
}