import Link from 'next/link';
import Card from '@/components/ui/Card';

interface SponsorshipCategoryCardProps {
  icon: React.ElementType;
  title: string;
  count: number;
  impressions: number;
  color: string;
  href: string;
}

export default function SponsorshipCategoryCard({
  icon: Icon,
  title,
  count,
  impressions,
  color,
  href
}: SponsorshipCategoryCardProps) {
  return (
    <Link href={href}>
      <Card className="p-4 hover:border-primary-blue/50 transition-all duration-300 cursor-pointer group">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className={`w-10 h-10 rounded-lg bg-iron-gray flex items-center justify-center group-hover:bg-primary-blue/10 transition-colors`}>
              <Icon className={`w-5 h-5 ${color}`} />
            </div>
            <div>
              <p className="text-white font-medium">{title}</p>
              <p className="text-sm text-gray-500">{count} active</p>
            </div>
          </div>
          <div className="text-right">
            <p className="text-white font-semibold">{impressions.toLocaleString()}</p>
            <p className="text-xs text-gray-500">impressions</p>
          </div>
        </div>
      </Card>
    </Link>
  );
}