import { ChevronRight, LucideIcon } from 'lucide-react';
import { Box } from './Box';
import { Icon } from './Icon';
import { Link } from './Link';
import { Text } from './Text';

export interface SidebarActionLinkProps {
  label: string;
  icon: LucideIcon;
  href: string;
  isActive?: boolean;
}

export const SidebarActionLink = ({ 
  label, 
  icon, 
  href,
  isActive = false 
}: SidebarActionLinkProps) => {
  return (
    <Link 
      href={href} 
      variant="ghost" 
      underline="none"
    >
      <Box 
        display="flex" 
        alignItems="center" 
        gap={3} 
        padding={3} 
        rounded="lg"
        bg={isActive ? 'var(--ui-color-bg-surface-muted)' : 'transparent'}
        className="group hover:bg-white/5 transition-colors"
      >
        <Box 
          padding={2} 
          rounded="md" 
          bg={isActive ? 'var(--ui-color-intent-primary)' : 'var(--ui-color-bg-surface-muted)'}
          display="flex"
          center
        >
          <Icon 
            icon={icon} 
            size={4} 
            intent={isActive ? 'high' : 'low'} 
          />
        </Box>
        <Text 
          size="sm" 
          variant={isActive ? 'high' : 'med'} 
          weight={isActive ? 'bold' : 'medium'}
          flexGrow={1}
        >
          {label}
        </Text>
        <Icon 
          icon={ChevronRight} 
          size={4} 
          intent="low" 
          className="opacity-0 group-hover:opacity-100 transition-opacity"
        />
      </Box>
    </Link>
  );
};