import { Users } from 'lucide-react';
import { ReactNode } from 'react';
import { Badge } from './Badge';
import { Box } from './Box';
import { Heading } from './Heading';
import { Stack } from './Stack';
import { Text } from './Text';

interface TeamHeroSectionProps {
  title: ReactNode;
  description: string;
  statsContent: ReactNode;
  actionsContent: ReactNode;
  sideContent: ReactNode;
}

export function TeamHeroSection({
  title,
  description,
  statsContent,
  actionsContent,
  sideContent,
}: TeamHeroSectionProps) {
  return (
    <Box position="relative" mb={10} overflow="hidden">
      {/* Main Hero Card */}
      <Box 
        position="relative" 
        py={12} 
        px={8} 
        rounded="2xl" 
        style={{
          background: 'linear-gradient(to bottom right, rgba(147, 51, 234, 0.3), rgba(38, 38, 38, 0.8), #0f1115)',
          borderColor: 'rgba(147, 51, 234, 0.2)',
        }}
        border
      >
        {/* Background decorations */}
        <Box position="absolute" top="0" right="0" w="80" h="80" bg="bg-purple-500" bgOpacity={0.1} rounded="full" blur="3xl" />
        <Box position="absolute" bottom="0" left="1/4" w="64" h="64" bg="bg-neon-aqua" bgOpacity={0.05} rounded="full" blur="3xl" />
        <Box position="absolute" top="1/2" right="1/4" w="48" h="48" bg="bg-yellow-400" bgOpacity={0.05} rounded="full" blur="2xl" />

        <Box position="relative" zIndex={10}>
          <Stack direction={{ base: 'col', lg: 'row' }} align="start" justify="between" gap={8}>
            <Box maxWidth="xl">
              {/* Badge */}
              <Box mb={4}>
                <Badge variant="primary" icon={Users}>
                  Team Racing
                </Badge>
              </Box>

              <Heading level={1}>
                {title}
              </Heading>

              <Text size="lg" color="text-gray-400" leading="relaxed" block mt={4} mb={6}>
                {description}
              </Text>

              {/* Quick Stats */}
              <Stack direction="row" gap={4} mb={6} wrap>
                {statsContent}
              </Stack>

              {/* CTA Buttons */}
              <Stack direction="row" gap={3} wrap>
                {actionsContent}
              </Stack>
            </Box>

            {/* Side Content */}
            <Box w={{ base: 'full', lg: '72' }}>
              {sideContent}
            </Box>
          </Stack>
        </Box>
      </Box>
    </Box>
  );
}