import { Trophy, Users, Car, Flag, Megaphone } from 'lucide-react';
import Button from '@/components/ui/Button';

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

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

  return (
    <div className="flex items-center justify-between p-3 rounded-lg bg-warning-amber/10 border border-warning-amber/30">
      <div className="flex items-center gap-3">
        <Icon className="w-4 h-4 text-warning-amber" />
        <div>
          <p className="text-sm text-white">{renewal.name}</p>
          <p className="text-xs text-gray-400">Renews {renewal.formattedRenewDate}</p>
        </div>
      </div>
      <div className="text-right">
        <p className="text-sm font-semibold text-white">{renewal.formattedPrice}</p>
        <Button variant="secondary" className="text-xs mt-1 py-1 px-2 min-h-0">
          Renew
        </Button>
      </div>
    </div>
  );
}