'use client';

import { BrandMark } from '@/ui/BrandMark';
import { NavLink } from '@/ui/NavLink';
import { routes } from '@/lib/routing/RouteConfig';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { 
  LayoutGrid, 
  Trophy, 
  Users, 
  Calendar, 
  Flag, 
  Home
} from 'lucide-react';
import { usePathname } from 'next/navigation';

export function AppSidebar() {
  const pathname = usePathname();

  const navItems = [
    { label: 'Home', href: routes.public.home, icon: Home },
    { label: 'Leagues', href: routes.public.leagues, icon: Trophy },
    { label: 'Drivers', href: routes.public.drivers, icon: Users },
    { label: 'Leaderboards', href: routes.public.leaderboards, icon: LayoutGrid },
    { label: 'Teams', href: routes.public.teams, icon: Flag },
    { label: 'Races', href: routes.public.races, icon: Calendar },
  ];

  return (
    <Box display="flex" flexDirection="col" height="full" className="bg-base-black border-r border-outline-steel">
      {/* Brand Header */}
      <Box p={6} pb={8}>
        <BrandMark />
      </Box>

      {/* Navigation */}
      <Box flex={1} px={2} className="overflow-y-auto">
        <Stack gap={1}>
          {navItems.map((item) => (
            <NavLink
              key={item.href}
              href={item.href}
              label={item.label}
              icon={item.icon}
              isActive={pathname === item.href}
              variant="sidebar"
            />
          ))}
        </Stack>
      </Box>
    </Box>
  );
}