'use client';

import { ReactNode } from 'react';
import { Container } from '@/ui/Container';
import { Group } from '@/ui/Group';
import { Text } from '@/ui/Text';
import { StatusDot } from '@/ui/StatusDot';

interface TeamsDirectoryProps {
  children: ReactNode;
  title?: string;
  subtitle?: string;
}

export function TeamsDirectory({ children, title, subtitle }: TeamsDirectoryProps) {
  return (
    <Container size="lg" py={12}>
      <Group direction="column" gap={10} fullWidth>
        {title && (
          <Group direction="row" align="center" gap={2}>
            <StatusDot intent="primary" size="md" />
            <Text size="xs" weight="bold" variant="low" uppercase>{title}</Text>
          </Group>
        )}
        {children}
      </Group>
    </Container>
  );
}

export function TeamsDirectorySection({ children, title, accentColor = "primary-accent" }: { children: ReactNode, title: string, accentColor?: string }) {
  const intentMap: Record<string, 'primary' | 'success' | 'warning' | 'critical' | 'telemetry'> = {
    'primary-accent': 'primary',
    'telemetry-aqua': 'telemetry',
  };

  return (
    <Group direction="column" gap={6} fullWidth>
      <Group direction="row" align="center" gap={2}>
        <StatusDot intent={intentMap[accentColor] || 'primary'} size="md" />
        <Text size="xs" weight="bold" variant="low" uppercase>{title}</Text>
      </Group>
      {children}
    </Group>
  );
}