'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 TeamsDirectoryProps {
  children: ReactNode;
  title?: string;
  subtitle?: string;
}

export function TeamsDirectory({ children, title, subtitle }: TeamsDirectoryProps) {
  return (
    <Box as="main" bg="base-black" minHeight="screen">
      <Container size="lg">
        <Box paddingY={12}>
          <Stack gap={10}>
            {title && (
              <Stack direction="row" align="center" gap={2} mb={6}>
                <Box w="2" h="2" bg="primary-accent" />
                <Text size="xs" weight="bold" color="text-gray-400" uppercase>{title}</Text>
              </Stack>
            )}
            {children}
          </Stack>
        </Box>
      </Container>
    </Box>
  );
}

export function TeamsDirectorySection({ children, title, accentColor = "primary-accent" }: { children: ReactNode, title: string, accentColor?: string }) {
  return (
    <Box>
      <Stack direction="row" align="center" gap={2} mb={6}>
        <Box w="2" h="2" bg={accentColor} />
        <Text size="xs" weight="bold" color="text-gray-400" uppercase>{title}</Text>
      </Stack>
      {children}
    </Box>
  );
}