import { Card } from '@/ui/Card';
import { Icon } from '@/ui/Icon';
import { Link } from '@/ui/Link';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { LucideIcon } from 'lucide-react';

interface SponsorshipCategoryCardProps {
  icon: LucideIcon;
  title: string;
  countLabel: string;
  impressionsLabel: string;
  color: string;
  href: string;
}

export function SponsorshipCategoryCard({
  icon,
  title,
  countLabel,
  impressionsLabel,
  color,
  href
}: SponsorshipCategoryCardProps) {
  return (
    <Link href={href} variant="ghost" block>
      <Card p={4} className="hover:border-charcoal-outline/60 transition-all cursor-pointer">
        <Stack direction="row" align="center" justify="between">
          <Stack direction="row" align="center" gap={3}>
            <Stack 
              width="10" 
              height="10" 
              rounded="lg" 
              bg="bg-charcoal-outline" 
              display="flex" 
              center
            >
              <Icon icon={icon} size={5} className={color} />
            </Stack>
            <Stack>
              <Text weight="medium" color="text-white" block>{title}</Text>
              <Text size="sm" color="text-gray-500">{countLabel}</Text>
            </Stack>
          </Stack>
          <Stack textAlign="right">
            <Text weight="semibold" color="text-white" block>{impressionsLabel}</Text>
            <Text size="xs" color="text-gray-500">impressions</Text>
          </Stack>
        </Stack>
      </Card>
    </Link>
  );
}
