'use client';

import React from 'react';
import { Calendar, Clock, MapPin, Car, Trophy } from 'lucide-react';
import { Card } from '@/ui/Card';
import { Box } from '@/ui/Box';
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';
import { Surface } from '@/ui/Surface';

interface Race {
  id: string;
  name: string;
  track?: string;
  car?: string;
  scheduledAt: string;
  status: 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}>
          <Box style={{ width: '0.75rem', height: '0.75rem', borderRadius: '9999px', backgroundColor: race.isPast ? '#10b981' : '#3b82f6' }} />
          <Heading level={3} style={{ fontSize: '1.125rem' }}>{race.name}</Heading>
          <Badge variant={race.status === 'completed' ? 'success' : 'primary'}>
            {race.status === 'completed' ? 'Completed' : 'Scheduled'}
          </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">{new Date(race.scheduledAt).toLocaleDateString()}</Text>
          </Stack>

          <Stack direction="row" align="center" gap={2}>
            <Icon icon={Clock} size={4} color="#9ca3af" />
            <Text size="sm" color="text-gray-300">{new Date(race.scheduledAt).toLocaleTimeString()}</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>
  );
}
