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

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

export function TeamHeroSection({
  title,
  description,
  statsContent,
  actionsContent,
  sideContent,
}: TeamHeroSectionProps) {
  return (
    <Stack position="relative" mb={10} overflow="hidden">
      {/* Main Hero Card */}
      <Stack 
        position="relative" 
        py={12} 
        px={8} 
        rounded="2xl" 
        bg="surface-charcoal"
        borderColor="outline-steel"
        border
      >
        {/* Background decorations */}
        <Stack position="absolute" top="0" right="0" w="80" h="80" bg="bg-purple-500" bgOpacity={0.1} rounded="full" blur="3xl" />
        <Stack position="absolute" bottom="0" left="1/4" w="64" h="64" bg="bg-neon-aqua" bgOpacity={0.05} rounded="full" blur="3xl" />
        <Stack position="absolute" top="1/2" right="1/4" w="48" h="48" bg="bg-yellow-400" bgOpacity={0.05} rounded="full" blur="2xl" />

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

              <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>
            </Stack>

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