import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Check, Info } from 'lucide-react';

export interface PricingTier {
  id: string;
  name: string;
  price: number;
  priceLabel: string;
  period: string;
  description: string;
  features: string[];
  isPopular?: boolean;
  available?: boolean;
}

interface PricingTableShellProps {
  title: string;
  tiers: PricingTier[];
  onSelect?: (id: string) => void;
  selectedId?: string;
}

/**
 * PricingTableShell
 * 
 * A semantic component for displaying sponsorship pricing tiers.
 * Clean, comparison-focused layout.
 */
export function PricingTableShell({ title, tiers, onSelect, selectedId }: PricingTableShellProps) {
  return (
    <Stack mb={8}>
      <Heading level={3} fontSize="lg" weight="semibold" mb={4} color="text-white">
        {title}
      </Heading>
      <Stack display="grid" gridCols={{ base: 1, md: 3 }} gap={6}>
        {tiers.map((tier) => (
          <Stack 
            key={tier.id}
            p={6}
            rounded="xl"
            border
            borderColor={selectedId === tier.id ? 'border-primary-blue' : 'border-charcoal-outline/50'}
            bg={selectedId === tier.id ? 'bg-primary-blue/5' : 'bg-iron-gray/10'}
            position="relative"
            cursor="pointer"
            onClick={() => onSelect?.(tier.id)}
            transition-all
            hoverBorderColor={selectedId === tier.id ? 'border-primary-blue' : 'border-charcoal-outline'}
          >
            {tier.isPopular && (
              <Stack 
                position="absolute" 
                top={0} 
                right={6} 
                transform="-translate-y-1/2"
                bg="bg-primary-blue"
                px={3}
                py={1}
                rounded="full"
              >
                <Text size="xs" weight="bold" color="text-white" uppercase letterSpacing="wider">Popular</Text>
              </Stack>
            )}

            <Stack mb={6}>
              <Text size="sm" weight="bold" color="text-primary-blue" uppercase letterSpacing="wider" block mb={2}>
                {tier.name}
              </Text>
              <Stack direction="row" align="baseline" gap={1}>
                <Text size="3xl" weight="bold" color="text-white">{tier.priceLabel}</Text>
                <Text size="sm" color="text-gray-500">/{tier.period}</Text>
              </Stack>
              <Text size="sm" color="text-gray-400" block mt={2}>
                {tier.description}
              </Text>
            </Stack>

            <Stack gap={3} mb={8}>
              {tier.features.map((feature, i) => (
                <Stack key={i} direction="row" align="start" gap={3}>
                  <Stack mt={0.5}>
                    <Icon icon={Check} size={3.5} color="text-performance-green" />
                  </Stack>
                  <Text size="sm" color="text-gray-300">{feature}</Text>
                </Stack>
              ))}
            </Stack>

            {!tier.available && (
              <Stack display="flex" alignItems="center" gap={2} p={3} rounded="lg" bg="bg-racing-red/10" border borderColor="border-racing-red/20">
                <Icon icon={Info} size={4} color="text-racing-red" />
                <Text size="xs" weight="medium" color="text-racing-red">Currently Unavailable</Text>
              </Stack>
            )}
          </Stack>
        ))}
      </Stack>
    </Stack>
  );
}