import { CheckCircle2, LucideIcon } from 'lucide-react';
import { Badge } from './Badge';
import { Box } from './Box';
import { Heading } from './Heading';
import { Icon } from './Icon';
import { Stack } from './Stack';
import { Surface } from './Surface';
import { Text } from './Text';

interface SponsorTierCardProps {
  type: 'main' | 'secondary';
  available: boolean;
  availableCount?: number;
  totalCount?: number;
  price: number;
  benefits: string[];
  isSelected: boolean;
  onClick: () => void;
  icon: LucideIcon;
  iconColor: string;
}

export function SponsorTierCard({
  type,
  available,
  availableCount,
  totalCount,
  price,
  benefits,
  isSelected,
  onClick,
  icon,
  iconColor,
}: SponsorTierCardProps) {
  const isMain = type === 'main';

  return (
    <Surface
      variant="muted"
      rounded="xl"
      border={true}
      padding={5}
      className={`transition-all duration-200 ${available ? 'cursor-pointer' : 'opacity-60 cursor-default'} ${isSelected ? 'border-primary-blue ring-2 ring-primary-blue/20' : 'border-charcoal-outline'}`}
      onClick={available ? onClick : undefined}
      position="relative"
    >
      <Stack direction="row" align="start" justify="between" mb={4}>
        <Box>
          <Stack direction="row" align="center" gap={2} mb={1}>
            <Icon icon={icon} size={5} className={iconColor} />
            <Heading level={3}>{isMain ? 'Main Sponsor' : 'Secondary Sponsor'}</Heading>
          </Stack>
          <Text size="sm" color="text-gray-400">
            {isMain ? 'Primary branding position' : 'Supporting branding position'}
          </Text>
        </Box>
        <Badge variant={available ? 'success' : 'default'}>
          {isMain 
            ? (available ? 'Available' : 'Filled')
            : (available ? `${availableCount}/${totalCount} Available` : 'Full')
          }
        </Badge>
      </Stack>
      
      <Box mb={4}>
        <Text size="3xl" weight="bold" color="text-white">
          ${price}
          <Text size="sm" weight="normal" color="text-gray-500">/season</Text>
        </Text>
      </Box>

      <Stack gap={2} mb={4}>
        {benefits.map((benefit, i) => (
          <Stack key={i} direction="row" align="center" gap={2}>
            <Icon icon={CheckCircle2} size={4} color="text-performance-green" />
            <Text size="sm" color="text-gray-300">{benefit}</Text>
          </Stack>
        ))}
      </Stack>

      {isSelected && available && (
        <Box position="absolute" top="4" right="4">
          <Box 
            width="4" 
            height="4" 
            rounded="full" 
            bg="bg-primary-blue" 
            display="flex" 
            center
          >
            <Icon icon={CheckCircle2} size={3} color="text-white" />
          </Box>
        </Box>
      )}
    </Surface>
  );
}