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

interface QuickActionItemProps {
  href: string;
  label: string;
  icon: LucideIcon;
  iconVariant?: 'blue' | 'amber' | 'purple' | 'green';
}

export function QuickActionItem({ href, label, icon, iconVariant = 'blue' }: QuickActionItemProps) {
  const variantColors = {
    blue: 'rgb(59, 130, 246)',
    amber: 'rgb(245, 158, 11)',
    purple: 'rgb(168, 85, 247)',
    green: 'rgb(16, 185, 129)',
  };

  const variantBgs = {
    blue: 'bg-primary-blue/10',
    amber: 'bg-warning-amber/10',
    purple: 'bg-purple-500/10',
    green: 'bg-performance-green/10',
  };

  return (
    <Link
      href={href}
      block
      p={3}
      rounded="lg"
      bg="bg-deep-graphite"
      hoverBorderColor="charcoal-outline/50"
      transition
      className="hover:bg-charcoal-outline/50"
    >
      <Box display="flex" alignItems="center" gap={3} fullWidth>
        <Box p={2} bg={variantBgs[iconVariant]} rounded="lg">
          <Icon icon={icon} size={4} color={variantColors[iconVariant]} />
        </Box>
        <Text size="sm" color="text-white" weight="medium">{label}</Text>
        <Icon icon={ChevronRight} size={4} color="rgb(107, 114, 128)" ml="auto" />
      </Box>
    </Link>
  );
}