'use client';

import React from 'react';
import { Calendar, Clock, MapPin, Car, Trophy } from 'lucide-react';
import { Card } from '@/ui/Card';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Heading } from '@/ui/Heading';
import { Badge } from '@/ui/Badge';
import { Grid } from '@/ui/Grid';
import { Icon } from '@/ui/Icon';

interface Race {
  id: string;
  name: string;
  track?: string;
  car?: string;
  formattedDate: string;
  formattedTime: string;
  status: string;
  statusLabel: string;
  sessionType?: string;
  isPast?: boolean;
}

interface ScheduleRaceCardProps {
  race: Race;
}

export function ScheduleRaceCard({ race }: ScheduleRaceCardProps) {
  return (
    <Card>
      <Stack gap={4}>
        <Stack direction="row" align="center" gap={3}>
          <Stack w="3" h="3" rounded="full" bg={race.isPast ? 'bg-performance-green' : 'bg-primary-blue'} />
          <Heading level={3} fontSize="lg">{race.name}</Heading>
          <Badge variant={race.status === 'completed' ? 'success' : 'primary'}>
            {race.statusLabel}
          </Badge>
        </Stack>

        <Grid cols={4} gap={4}>
          <Stack direction="row" align="center" gap={2}>
            <Icon icon={Calendar} size={4} color="#9ca3af" />
            <Text size="sm" color="text-gray-300">{race.formattedDate}</Text>
          </Stack>

          <Stack direction="row" align="center" gap={2}>
            <Icon icon={Clock} size={4} color="#9ca3af" />
            <Text size="sm" color="text-gray-300">{race.formattedTime}</Text>
          </Stack>

          {race.track && (
            <Stack direction="row" align="center" gap={2}>
              <Icon icon={MapPin} size={4} color="#9ca3af" />
              <Text size="sm" color="text-gray-300" truncate>{race.track}</Text>
            </Stack>
          )}

          {race.car && (
            <Stack direction="row" align="center" gap={2}>
              <Icon icon={Car} size={4} color="#9ca3af" />
              <Text size="sm" color="text-gray-300" truncate>{race.car}</Text>
            </Stack>
          )}
        </Grid>

        {race.sessionType && (
          <Stack direction="row" align="center" gap={2}>
            <Icon icon={Trophy} size={4} color="#9ca3af" />
            <Text size="sm" color="text-gray-400">{race.sessionType} Session</Text>
          </Stack>
        )}
      </Stack>
    </Card>
  );
}