import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';
import { ReactNode } from 'react';

interface SponsorSlotCardProps {
  title: string;
  status: string;
  statusColor: string;
  benefits: string;
  price?: string;
  action?: ReactNode;
  available: boolean;
  variant: 'main' | 'secondary';
}

export function SponsorSlotCard({
  title,
  status,
  statusColor,
  benefits,
  price,
  action,
  available,
  variant,
}: SponsorSlotCardProps) {
  const bgClass = available 
    ? (variant === 'main' ? 'bg-performance-green/10 border-performance-green/30' : 'bg-purple-500/10 border-purple-500/30')
    : 'bg-iron-gray/30 border-charcoal-outline';

  return (
    <Box p={3} rounded="lg" border={true} className={bgClass}>
      <Box display="flex" alignItems="center" justifyContent="between" mb={1}>
        <Text size="sm" weight="medium" color="text-white">{title}</Text>
        <Text size="xs" className={statusColor}>{status}</Text>
      </Box>
      <Text size="xs" color="text-gray-400" block mb={2}>{benefits}</Text>
      {available && price && (
        <Box display="flex" alignItems="center" justifyContent="between">
          <Text size="lg" weight="bold" color="text-white">{price}</Text>
          {action}
        </Box>
      )}
    </Box>
  );
}