'use client';

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

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>
        <TableHeaderCell>Time</TableHeaderCell>
        <TableHeaderCell>Session Details</TableHeaderCell>
        <TableHeaderCell>League</TableHeaderCell>
        <TableHeaderCell textAlign="right">Status</TableHeaderCell>
      </TableHead>
      <TableBody>
        {races.map((race) => (
          <TableRow 
            key={race.id}
            onClick={() => onRaceClick(race.id)}
            clickable
          >
            <TableCell>
              <Text size="xs" variant="telemetry" weight="bold" mono>{race.time}</Text>
            </TableCell>
            <TableCell>
              <Stack gap={0.5}>
                <Text size="sm" weight="bold" variant="high">
                  {race.track}
                </Text>
                <Text size="xs" variant="low" uppercase letterSpacing="widest">{race.car}</Text>
              </Stack>
            </TableCell>
            <TableCell>
              <Text size="xs" variant="low" weight="medium">{race.leagueName || 'Official'}</Text>
            </TableCell>
            <TableCell textAlign="right">
              <Stack direction="row" justify="end">
                <SessionStatusBadge status={race.status} />
              </Stack>
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}