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

export interface QuickActionItemProps {
  label: string;
  icon: LucideIcon;
  href: string;
  variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'critical';
}

export const QuickActionItem = ({ 
  label, 
  icon, 
  href,
  variant = 'primary' 
}: QuickActionItemProps) => {
  const variantBgs = {
    primary: 'rgba(25, 140, 255, 0.1)',
    secondary: 'var(--ui-color-bg-surface-muted)',
    success: 'rgba(111, 227, 122, 0.1)',
    warning: 'rgba(255, 190, 77, 0.1)',
    critical: 'rgba(227, 92, 92, 0.1)',
  };

  const variantIntents = {
    primary: 'primary' as const,
    secondary: 'med' as const,
    success: 'success' as const,
    warning: 'warning' as const,
    critical: 'critical' as const,
  };

  return (
    <Link href={href} underline="none">
      <Box 
        display="flex" 
        alignItems="center" 
        gap={4} 
        padding={4} 
        rounded="lg" 
        bg="var(--ui-color-bg-surface)"
        style={{ border: '1px solid var(--ui-color-border-default)' }}
        className="group hover:bg-white/5 transition-colors"
      >
        <Box padding={2} bg={variantBgs[variant]} rounded="lg">
          <Icon icon={icon} size={5} intent={variantIntents[variant] as any} />
        </Box>
        <Text weight="medium" variant="high" flexGrow={1}>
          {label}
        </Text>
        <Icon icon={ChevronRight} size={4} intent="low" />
      </Box>
    </Link>
  );
};