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

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

/**
 * NavLink provides a consistent link component for navigation.
 * Supports both sidebar and top navigation variants.
 */
export function NavLink({ href, label, icon, isActive, variant = 'sidebar' }: NavLinkProps) {
  const content = (
    <Box display="flex" alignItems="center" gap={variant === 'top' ? 2 : 3} paddingX={3} paddingY={2} rounded={variant === 'sidebar' ? 'md' : undefined} style={{ transition: 'all 0.2s' }}>
      {icon && <Icon icon={icon} size={variant === 'top' ? 4 : 5} intent={isActive ? 'primary' : 'low'} />}
      <Text size="sm" weight={isActive ? 'bold' : 'medium'} variant={isActive ? 'primary' : 'med'}>
        {label}
      </Text>
      {variant === 'sidebar' && isActive && (
        <Box marginLeft="auto" width="4px" height="1rem" bg="var(--ui-color-intent-primary)" rounded="full" />
      )}
    </Box>
  );

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