import { Box } from '@/ui/Box';
import { Icon } from '@/ui/Icon';
import Link from 'next/link';
import { Text } from '@/ui/Text';
import { LucideIcon, ChevronRight } from 'lucide-react';

interface NavLinkProps {
  href: string;
  label: string;
  icon?: LucideIcon;
  isActive?: boolean;
  variant?: 'sidebar' | 'top';
  collapsed?: boolean;
}

export function NavLink({ href, label, icon, isActive, variant = 'sidebar', collapsed = false }: NavLinkProps) {
  const isTop = variant === 'top';

  // Radical "Game Menu" Style
  // Active: Solid Primary Color, Shadow, Bold.
  // Inactive: Glass card with strong hover effects.

  const content = (
    <Box 
      display="flex" 
      alignItems="center" 
      justifyContent={collapsed ? 'center' : 'space-between'}
      gap={collapsed ? 0 : 3} 
      paddingX={collapsed ? 2 : 4} 
      paddingY={3} 
      className={`
        relative transition-all duration-300 ease-out rounded-xl border w-full
        ${isActive
          ? 'bg-primary-accent border-primary-accent shadow-[0_0_20px_rgba(25,140,255,0.3)]'
          : 'bg-white/5 border-white/5 group-hover:bg-white/15 group-hover:border-white/20 group-hover:shadow-lg group-hover:shadow-white/5'
        }
        ${!collapsed && isActive ? 'translate-x-2' : ''}
        ${!collapsed && !isActive ? 'group-hover:translate-x-2' : ''}
      `}
      title={collapsed ? label : undefined}
    >
      <Box display="flex" alignItems="center" gap={3} justifyContent={collapsed ? 'center' : 'start'} width={collapsed ? 'full' : 'auto'}>
        {icon && (
          <Icon 
            icon={icon} 
            size={5} // 20px
            className={`transition-colors duration-200 ${isActive ? 'text-white' : 'text-text-med group-hover:text-white'}`}
          />
        )}
        
        {!collapsed && (
          <Text 
            size="sm" 
            weight="bold"
            variant="inherit"
            className={`tracking-wide transition-colors duration-200 ${isActive ? 'text-white' : 'text-text-med group-hover:text-white'}`}
          >
            {label}
          </Text>
        )}
      </Box>

      {/* Chevron on Hover/Active - Only when expanded */}
      {!collapsed && (
        <Icon 
          icon={ChevronRight} 
          size={4} 
          className={`transition-all duration-300 ${isActive ? 'text-white opacity-100' : 'text-white opacity-0 group-hover:opacity-100 -translate-x-4 group-hover:translate-x-0'}`} 
        />
      )}
    </Box>
  );

  return (
    <Link 
      href={href} 
      className={`w-full group block ${!isTop ? '' : ''}`}
    >
      {content}
    </Link>
  );
}