'use client';

import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Box } from '@/ui/Box';
import { Surface } from '@/ui/Surface';
import { Icon } from '@/ui/Icon';
import { Search } from 'lucide-react';

export function RacesEmptyState() {
  return (
    <Surface variant="precision" padding="xl">
      <Stack align="center" justify="center" gap={4} paddingY={12}>
        <Box 
          width="3rem" 
          height="3rem" 
          display="flex" 
          alignItems="center" 
          justifyContent="center" 
          rounded="full" 
          bg="var(--ui-color-bg-surface-muted)"
        >
          <Icon icon={Search} size={6} intent="low" />
        </Box>
        <Stack gap={1} align="center">
          <Text size="lg" weight="bold">No races found.</Text>
          <Text variant="low" size="sm">No races match the current filters.</Text>
        </Stack>
      </Stack>
    </Surface>
  );
}