'use client';

import React, { ReactNode } from 'react';
import { Glow } from '@/ui/Glow';
import { Heading } from '@/ui/Heading';
import { Text } from '@/ui/Text';
import { Stack } from '@/ui/Stack';
import { Box } from '@/ui/Box';

export interface TeamHeroProps {
  title: ReactNode;
  description: string;
  stats?: ReactNode;
  actions?: ReactNode;
  sideContent?: ReactNode;
}

export function TeamHero({ 
  title, 
  description, 
  stats, 
  actions,
  sideContent 
}: TeamHeroProps) {
  return (
    <Box 
      position="relative" 
      backgroundColor="var(--ui-color-bg-base)" 
      paddingY={12} 
      style={{ borderBottom: '1px solid var(--ui-color-border-default)', overflow: 'hidden' }}
    >
      <Glow color="purple" size="xl" opacity={0.05} position="top-right" />
      
      <Stack direction={{ base: 'col', lg: 'row' }} gap={12} align="start">
        <Stack flex={1} gap={4}>
          <Heading level={1} size="4xl" weight="bold">
            {title}
          </Heading>
          <Text size="lg" variant="low" block leading="relaxed" marginBottom={4}>
            {description}
          </Text>
          
          {stats && <Box marginBottom={4}>{stats}</Box>}
          
          {actions && (
            <Stack direction="row" gap={4} wrap>
              {actions}
            </Stack>
          )}
        </Stack>
        
        {sideContent && (
          <Box width={{ base: '100%', lg: '24rem' }} flexShrink={0}>
            {sideContent}
          </Box>
        )}
      </Stack>
    </Box>
  );
}