import React from 'react';
import { LucideIcon } from 'lucide-react';
import { Link } from './Link';
import { Card } from './Card';
import { Box } from './Box';
import { Stack } from './Stack';
import { Text } from './Text';
import { Icon } from './Icon';

interface SponsorshipCategoryCardProps {
  icon: LucideIcon;
  title: string;
  count: number;
  impressions: number;
  color: string;
  href: string;
}

export function SponsorshipCategoryCard({
  icon,
  title,
  count,
  impressions,
  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}>
            <Box 
              width="10" 
              height="10" 
              rounded="lg" 
              bg="bg-charcoal-outline" 
              display="flex" 
              center
            >
              <Icon icon={icon} size={5} className={color} />
            </Box>
            <Box>
              <Text weight="medium" color="text-white" block>{title}</Text>
              <Text size="sm" color="text-gray-500">{count} active</Text>
            </Box>
          </Stack>
          <Box textAlign="right">
            <Text weight="semibold" color="text-white" block>{impressions.toLocaleString()}</Text>
            <Text size="xs" color="text-gray-500">impressions</Text>
          </Box>
        </Stack>
      </Card>
    </Link>
  );
}