import { ReactNode } from 'react';
import { Box } from './Box';
import { Glow } from './Glow';
import { Heading } from './Heading';
import { Text } from './Text';

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

export const TeamHero = ({ 
  title, 
  description, 
  stats, 
  actions,
  sideContent 
}: TeamHeroProps) => {
  return (
    <Box 
      position="relative" 
      bg="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" />
      
      <Box display="flex" flexDirection={{ base: 'col', lg: 'row' }} gap={12} alignItems="start">
        <Box flex={1}>
          <Heading level={1} size="4xl" weight="bold" marginBottom={4}>
            {title}
          </Heading>
          <Text size="lg" variant="low" block marginBottom={8} leading="relaxed">
            {description}
          </Text>
          
          {stats && <Box marginBottom={8}>{stats}</Box>}
          
          {actions && (
            <Box display="flex" gap={4} flexWrap="wrap">
              {actions}
            </Box>
          )}
        </Box>
        
        {sideContent && (
          <Box width={{ base: '100%', lg: '24rem' }} flexShrink={0}>
            {sideContent}
          </Box>
        )}
      </Box>
    </Box>
  );
};