import React, { ReactNode } from 'react';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Table, TableHead, TableBody, TableRow, TableHeader, TableCell } from '@/ui/Table';

interface RosterTableProps {
  children: ReactNode;
  columns?: string[];
}

export function RosterTable({ children, columns = ['Driver', 'Role', 'Joined', 'Rating', 'Rank'] }: RosterTableProps) {
  return (
    <Box border borderColor="border-steel-grey" bg="surface-charcoal/50" overflow="hidden">
      <Table>
        <TableHead className="bg-base-graphite/50">
          <TableRow>
            {columns.map((col) => (
              <TableHeader key={col} className="py-3 border-b border-border-steel-grey">
                <Text size="xs" weight="bold" color="text-gray-500" className="uppercase tracking-widest" block>
                  {col}
                </Text>
              </TableHeader>
            ))}
            <TableHeader className="py-3 border-b border-border-steel-grey">
              {null}
            </TableHeader>
          </TableRow>
        </TableHead>
        <TableBody>
          {children}
        </TableBody>
      </Table>
    </Box>
  );
}

interface RosterTableRowProps {
  driver: ReactNode;
  role: ReactNode;
  joined: string;
  rating: ReactNode;
  rank: ReactNode;
  actions?: ReactNode;
  onClick?: () => void;
}

export function RosterTableRow({
  driver,
  role,
  joined,
  rating,
  rank,
  actions,
  onClick,
}: RosterTableRowProps) {
  return (
    <TableRow 
      onClick={onClick} 
      clickable={!!onClick}
      className="group hover:bg-primary-blue/5 transition-colors border-b border-border-steel-grey/30 last:border-0"
    >
      <TableCell className="py-4">
        {driver}
      </TableCell>
      <TableCell className="py-4">
        {role}
      </TableCell>
      <TableCell className="py-4">
        <Text size="sm" color="text-gray-400" font="mono">{joined}</Text>
      </TableCell>
      <TableCell className="py-4">
        {rating}
      </TableCell>
      <TableCell className="py-4">
        {rank}
      </TableCell>
      <TableCell className="py-4 text-right">
        <Stack direction="row" align="center" justify="end" gap={2}>
          {actions}
        </Stack>
      </TableCell>
    </TableRow>
  );
}