'use client';
import { routes } from '@/lib/routing/RouteConfig';
import { Box } from '@/ui/Box';
import { Icon } from '@/ui/Icon';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import {
    Handshake,
    Palette,
    Settings,
    Trophy,
    User
} from 'lucide-react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';

import { ProfileLayoutViewData } from '@/lib/view-data/ProfileLayoutViewData';

export function ProfileSidebarTemplate({ viewData: _viewData }: { viewData: ProfileLayoutViewData }) {
  const pathname = usePathname();

  const navItems = [
    { label: 'Overview', href: routes.protected.profile, icon: User },
    { label: 'Leagues', href: routes.protected.profileLeagues, icon: Trophy },
    { label: 'Liveries', href: routes.protected.profileLiveries, icon: Palette },
    { label: 'Sponsorships', href: routes.protected.profileSponsorshipRequests, icon: Handshake },
    { label: 'Settings', href: routes.protected.profileSettings, icon: Settings },
  ];

  return (
    <Box width="240px" flexShrink={0}>
      <Stack gap={1}>
        {navItems.map((item) => {
          const isActive = pathname === item.href;
          return (
            <Link key={item.href} href={item.href}>
              <Box
                px={4}
                py={2.5}
                rounded="md"
                backgroundColor={isActive ? 'rgba(25, 140, 255, 0.1)' : 'transparent'}
                color={isActive ? '#198CFF' : '#9ca3af'}
                transition
                display="flex"
                alignItems="center"
                gap={3}
                cursor="pointer"
                border
                borderColor={isActive ? 'rgba(25, 140, 255, 0.2)' : 'transparent'}
              >
                <Icon icon={item.icon} size={4} color={isActive ? '#198CFF' : '#9ca3af'} />
                <Text 
                  size="sm" 
                  weight={isActive ? 'bold' : 'medium'}
                  color={isActive ? '#198CFF' : '#9ca3af'}
                >
                  {item.label}
                </Text>
                {isActive && (
                  <Box 
                    ml="auto" 
                    width="4px" 
                    height="4px" 
                    rounded="full"
                    backgroundColor="#198CFF" 
                  />
                )}
              </Box>
            </Link>
          );
        })}
      </Stack>
    </Box>
  );
}