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

interface SponsorMetricCardProps {
  label: string;
  value: string | number;
  icon: LucideIcon;
  color?: string;
  trend?: {
    value: number;
    isPositive: boolean;
  };
}

export function SponsorMetricCard({
  label,
  value,
  icon,
  color = 'text-primary-blue',
  trend,
}: SponsorMetricCardProps) {
  return (
    <Box
      bg="bg-iron-gray/50"
      rounded="lg"
      p={3}
      border={true}
      borderColor="border-charcoal-outline"
    >
      <Box display="flex" alignItems="center" gap={1.5} className={color} mb={1}>
        <Icon icon={icon} size={4} />
        <Text size="xs" weight="medium">{label}</Text>
      </Box>
      <Box display="flex" alignItems="baseline" gap={2}>
        <Text size="xl" weight="bold" color="text-white">
          {typeof value === 'number' ? value.toLocaleString() : value}
        </Text>
        {trend && (
          <Text size="xs" color={trend.isPositive ? 'text-performance-green' : 'text-red-400'}>
            {trend.isPositive ? '+' : ''}{trend.value}%
          </Text>
        )}
      </Box>
    </Box>
  );
}