import React from 'react';
import { Calendar } from 'lucide-react';
import { Box } from './Box';
import { Stack } from './Stack';
import { Text } from './Text';
import { Icon } from './Icon';

interface DateHeaderProps {
  label: string;
  count?: number;
  countLabel?: string;
}

export function DateHeader({ label, count, countLabel = 'races' }: DateHeaderProps) {
  return (
    <Stack direction="row" align="center" gap={3} px={2}>
      <Box p={2} bg="bg-primary-blue/10" rounded="lg">
        <Icon icon={Calendar} size={4} color="rgb(59, 130, 246)" />
      </Box>
      <Text weight="semibold" size="sm" color="text-white">
        {label}
      </Text>
      {count !== undefined && (
        <Text size="xs" color="text-gray-500">
          {count} {count === 1 ? countLabel.replace(/s$/, '') : countLabel}
        </Text>
      )}
    </Stack>
  );
}