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

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

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

  // Dieter Rams style: Unobtrusive, Honest, Thorough.
  // No glows. No shadows. Just clear contrast and alignment.

  const content = (
    <Box 
      display="flex" 
      alignItems="center" 
      gap={3} 
      paddingX={isTop ? 4 : 4} 
      paddingY={isTop ? 2 : 3} 
      className={`
        relative group transition-all duration-200 ease-out
        ${isActive
          ? 'text-text-high bg-white/5'
          : 'text-text-med hover:text-text-high hover:bg-white/5'
        }
        ${!isTop && 'rounded-md mx-2'} 
      `}
    >
      {icon && (
        <Icon 
          icon={icon} 
          size={4} 
          className={`transition-colors duration-200 ${isActive ? 'text-primary-accent' : 'text-text-low group-hover:text-text-med'}`}
        />
      )}
      
      <Text 
        size="sm" 
        weight={isActive ? 'medium' : 'normal'}
        variant="inherit"
        className="tracking-wide"
      >
        {label}
      </Text>

      {/* Minimal Active Indicator */}
      {!isTop && isActive && (
        <Box
          className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-4 bg-primary-accent rounded-r-full"
        />
      )}
    </Box>
  );

  return (
    <Link href={href} variant="inherit" underline="none" block={!isTop}>
      {content}
    </Link>
  );
}