import React from 'react';
import { Stack } from './Stack';
import { Box } from './Box';
import { Heading } from './Heading';
import { Badge } from './Badge';
import { Grid } from './Grid';
import { StatItem } from './StatItem';

interface StandingsItemProps {
  leagueName: string;
  position: number;
  points: number;
  wins: number;
  racesCompleted: number;
}

export function StandingsItem({
  leagueName,
  position,
  points,
  wins,
  racesCompleted,
}: StandingsItemProps) {
  return (
    <Box
      bg="bg-iron-gray/50"
      rounded="lg"
      border
      borderColor="border-charcoal-outline"
      p={4}
    >
      <Stack direction="row" align="center" justify="between" mb={3}>
        <Heading level={4}>
          {leagueName}
        </Heading>
        <Badge variant="primary">
          P{position}
        </Badge>
      </Stack>
      
      <Grid cols={3} gap={4}>
        <StatItem label="Points" value={points} align="center" />
        <StatItem label="Wins" value={wins} align="center" />
        <StatItem label="Races" value={racesCompleted} align="center" />
      </Grid>
    </Box>
  );
}