'use client';

import React, { ReactNode } from 'react';
import { Box } from '@/ui/Box';
import { Container } from '@/ui/Container';
import { Heading } from '@/ui/Heading';

interface TeamsDirectoryProps {
  children: ReactNode;
}

export function TeamsDirectory({ children }: TeamsDirectoryProps) {
  return (
    <Box paddingY={12} bg="var(--ui-color-bg-base)" minHeight="100vh">
      <Container size="xl">
        {children}
      </Container>
    </Box>
  );
}

interface TeamsDirectorySectionProps {
  title: string;
  children: ReactNode;
  accentColor?: string;
}

export function TeamsDirectorySection({ title, children }: TeamsDirectorySectionProps) {
  return (
    <Box marginBottom={16}>
      <Box marginBottom={8} borderBottom="1px solid var(--ui-color-border-muted)" paddingBottom={4}>
        <Heading level={2} weight="bold" uppercase>{title}</Heading>
      </Box>
      {children}
    </Box>
  );
}