import React from 'react';
import { Trophy, Users, Car, Flag, Megaphone, LucideIcon } from 'lucide-react';
import { Button } from '@/ui/Button';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';

interface RenewalAlertProps {
  renewal: {
    id: string;
    type: 'league' | 'team' | 'driver' | 'race' | 'platform';
    name: string;
    formattedRenewDate: string;
    formattedPrice: string;
  };
}

export function RenewalAlert({ renewal }: RenewalAlertProps) {
  const typeIcons: Record<string, LucideIcon> = {
    league: Trophy,
    team: Users,
    driver: Car,
    race: Flag,
    platform: Megaphone,
  };
  const Icon = typeIcons[renewal.type] || Trophy;

  return (
    <Stack direction="row" align="center" justify="between" style={{ padding: '0.75rem', borderRadius: '0.5rem', backgroundColor: 'rgba(245, 158, 11, 0.1)', border: '1px solid rgba(245, 158, 11, 0.3)' }}>
      <Stack direction="row" align="center" gap={3}>
        <Icon style={{ width: '1rem', height: '1rem', color: '#f59e0b' }} />
        <Box>
          <Text size="sm" color="text-white" style={{ display: 'block' }}>{renewal.name}</Text>
          <Text size="xs" color="text-gray-400">Renews {renewal.formattedRenewDate}</Text>
        </Box>
      </Stack>
      <Box style={{ textAlign: 'right' }}>
        <Text size="sm" weight="semibold" color="text-white" style={{ display: 'block' }}>{renewal.formattedPrice}</Text>
        <Button variant="secondary" style={{ fontSize: '0.75rem', marginTop: '0.25rem', padding: '0.25rem 0.5rem', minHeight: 0 }}>
          Renew
        </Button>
      </Box>
    </Stack>
  );
}