'use client';

import { ReactNode } from 'react';
import { Box } from '@/ui/Box';
import { Container } from '@/ui/Container';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';

interface RacesAllLayoutProps {
  children: ReactNode;
  header: ReactNode;
  stats: ReactNode;
  pagination: ReactNode;
}

export function RacesAllLayout({ children, header, stats, pagination }: RacesAllLayoutProps) {
  return (
    <Box as="main" minHeight="screen" bg="bg-base-black" py={8}>
      <Container size="lg">
        <Stack gap={8}>
          {header}
          {stats}
          {children}
          {pagination}
        </Stack>
      </Container>
    </Box>
  );
}

export function RacesAllStats({ count, onFilterClick }: { count: number, onFilterClick: () => void }) {
  return (
    <Box display="flex" justifyContent="between" alignItems="center">
      <Text size="sm" color="text-gray-400">
        Showing <Text as="span" color="text-white" weight="bold">{count}</Text> races
      </Text>
      <Box 
        as="button"
        onClick={onFilterClick}
        px={4}
        py={2}
        bg="bg-surface-charcoal"
        border
        borderColor="border-outline-steel"
        fontSize="10px"
        weight="bold"
        letterSpacing="wider"
        hoverBorderColor="border-primary-accent"
        transition
        className="uppercase"
      >
        Filters
      </Box>
    </Box>
  );
}