'use client';

import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Box } from '@/ui/Box';
import { RaceListRow } from './RaceListRow';

interface RacesDayGroupProps {
  dateLabel: string;
  races: any[];
  onRaceClick: (id: string) => void;
}

export function RacesDayGroup({ dateLabel, races, onRaceClick }: RacesDayGroupProps) {
  return (
    <Stack gap={3}>
      <Box 
        paddingX={4} 
        paddingY={2} 
        borderBottom 
        borderColor="var(--ui-color-border-muted)"
      >
        <Text size="xs" variant="low" weight="bold" uppercase letterSpacing="widest">
          {dateLabel}
        </Text>
      </Box>
      <Stack gap={1}>
        {races.map(race => (
          <RaceListRow 
            key={race.id} 
            race={race} 
            onClick={onRaceClick} 
          />
        ))}
      </Stack>
    </Stack>
  );
}