'use client';

import React from 'react';
import { Text } from '@/ui/Text';
import { Table, TableHead, TableBody, TableRow, TableHeader, TableCell } from '@/ui/Table';
import { SessionStatusBadge, type SessionStatus } from './SessionStatusBadge';

interface RaceRow {
  id: string;
  track: string;
  car: string;
  leagueName: string | null;
  time: string;
  status: SessionStatus;
}

interface RaceScheduleTableProps {
  races: RaceRow[];
  onRaceClick: (id: string) => void;
}

export function RaceScheduleTable({ races, onRaceClick }: RaceScheduleTableProps) {
  return (
    <Table>
      <TableHead>
        <TableRow>
          <TableHeader>Time</TableHeader>
          <TableHeader>Track</TableHeader>
          <TableHeader>Car</TableHeader>
          <TableHeader>League</TableHeader>
          <TableHeader textAlign="right">Status</TableHeader>
        </TableRow>
      </TableHead>
      <TableBody>
        {races.map((race) => (
          <TableRow 
            key={race.id}
            onClick={() => onRaceClick(race.id)}
            clickable
          >
            <TableCell>
              <Text size="xs" color="text-telemetry-aqua" weight="bold">{race.time}</Text>
            </TableCell>
            <TableCell>
              <Text size="sm" weight="bold" groupHoverTextColor="text-primary-accent">
                {race.track}
              </Text>
            </TableCell>
            <TableCell>
              <Text size="xs" color="text-gray-400">{race.car}</Text>
            </TableCell>
            <TableCell>
              <Text size="xs" color="text-gray-400">{race.leagueName || 'Official'}</Text>
            </TableCell>
            <TableCell textAlign="right">
              <SessionStatusBadge status={race.status} />
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}
