import React from 'react';
import { Box } from './primitives/Box';
import { Stack } from './primitives/Stack';
import { Text } from './Text';
import { Heading } from './Heading';
import { Avatar } from './Avatar';
import { Badge } from './Badge';
import { Trophy, Flag, Users, Star } from 'lucide-react';
import { Icon } from './Icon';

interface DashboardHeroProps {
  driverName: string;
  avatarUrl?: string | null;
  rating: number;
  rank: number;
  totalRaces: number;
  winRate: number;
  className?: string;
}

export function DashboardHero({
  driverName,
  avatarUrl,
  rating,
  rank,
  totalRaces,
  winRate,
  className = '',
}: DashboardHeroProps) {
  return (
    <Box
      position="relative"
      bg="bg-[#0C0D0F]"
      borderBottom
      borderColor="border-[#23272B]"
      overflow="hidden"
      className={className}
    >
      {/* Background Glow */}
      <Box
        position="absolute"
        top={-100}
        right={-100}
        w="500px"
        h="500px"
        bg="bg-primary-blue/10"
        rounded="full"
        blur="3xl"
      />

      <Box p={{ base: 6, md: 10 }} position="relative" zIndex={10}>
        <Stack direction={{ base: 'col', md: 'row' }} align="center" gap={8}>
          {/* Avatar Section */}
          <Box position="relative">
            <Box
              p={1}
              rounded="2xl"
              bg="bg-[#141619]"
              border
              borderColor="border-[#23272B]"
            >
              <Avatar
                src={avatarUrl}
                alt={driverName}
                size={120}
                className="rounded-xl"
              />
            </Box>
            <Box
              position="absolute"
              bottom={-2}
              right={-2}
              w="10"
              h="10"
              rounded="xl"
              bg="bg-[#4ED4E0]"
              borderWidth="2px"
              borderStyle="solid"
              borderColor="border-[#0C0D0F]"
              display="flex"
              center
            >
              <Icon icon={Star} size={5} color="#0C0D0F" />
            </Box>
          </Box>

          {/* Info Section */}
          <Stack flex={1} align={{ base: 'center', md: 'start' }} gap={4}>
            <Box>
              <Heading level={1} uppercase letterSpacing="tighter" mb={2}>
                {driverName}
              </Heading>
              <Stack direction="row" gap={4}>
                <Stack gap={0.5}>
                  <Text size="xs" color="text-gray-500" uppercase>Rating</Text>
                  <Text size="sm" weight="bold" color="text-[#4ED4E0]" font="mono">{rating}</Text>
                </Stack>
                <Stack gap={0.5}>
                  <Text size="xs" color="text-gray-500" uppercase>Rank</Text>
                  <Text size="sm" weight="bold" color="text-[#FFBE4D]" font="mono">#{rank}</Text>
                </Stack>
                <Stack gap={0.5}>
                  <Text size="xs" color="text-gray-500" uppercase>Starts</Text>
                  <Text size="sm" weight="bold" color="text-gray-300" font="mono">{totalRaces}</Text>
                </Stack>
              </Stack>
            </Box>

            <Stack direction="row" gap={3} wrap>
              <Badge variant="primary" rounded="lg" icon={Trophy}>
                {winRate}% Win Rate
              </Badge>
              <Badge variant="info" rounded="lg" icon={Flag}>
                Pro License
              </Badge>
              <Badge variant="default" rounded="lg" icon={Users}>
                Team Redline
              </Badge>
            </Stack>
          </Stack>

          {/* Quick Stats */}
          <Stack 
            direction="row" 
            gap={4} 
            p={6} 
            bg="bg-white/5" 
            rounded="2xl" 
            border 
            borderColor="border-white/10"
            className="backdrop-blur-md"
          >
            <Stack align="center" px={4}>
              <Text size="2xl" weight="bold" color="text-white">12</Text>
              <Text size="xs" color="text-gray-500" uppercase>Podiums</Text>
            </Stack>
            <Box w="1px" h="10" bg="bg-white/10" />
            <Stack align="center" px={4}>
              <Text size="2xl" weight="bold" color="text-white">4</Text>
              <Text size="xs" color="text-gray-500" uppercase>Wins</Text>
            </Stack>
          </Stack>
        </Stack>
      </Box>
    </Box>
  );
}