'use client';

import React from 'react';
import { Plus } from 'lucide-react';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Heading } from '@/ui/Heading';
import { Text } from '@/ui/Text';
import { Button } from '@/ui/Button';
import { Icon } from '@/ui/Icon';

interface TeamsDirectoryHeaderProps {
  onCreateTeam: () => void;
}

export function TeamsDirectoryHeader({ onCreateTeam }: TeamsDirectoryHeaderProps) {
  return (
    <Stack 
      direction="row" 
      align="end" 
      justify="between" 
      wrap 
      gap={4} 
      borderBottom 
      borderColor="outline-steel" 
      pb={6}
    >
      <Box>
        <Heading level={1} weight="bold">Teams</Heading>
        <Text 
          color="text-gray-500" 
          size="sm" 
          mt={1} 
          font="mono" 
          uppercase 
          letterSpacing="widest"
        >
          Operational Units & Racing Collectives
        </Text>
      </Box>
      <Box>
        <Button 
          variant="primary" 
          onClick={onCreateTeam}
          icon={<Icon icon={Plus} size={4} />}
        >
          Initialize Team
        </Button>
      </Box>
    </Stack>
  );
}