import { ReactNode } from 'react';
import { Badge } from './Badge';
import { Box } from './Box';
import { Heading } from './Heading';
import { Image } from './Image';
import { Stack } from './Stack';

interface DashboardHeroProps {
  driverName: string;
  avatarUrl: string;
  country: string;
  rating: string | number;
  rank: string | number;
  totalRaces: string | number;
  actions?: ReactNode;
  stats?: ReactNode;
}

export function DashboardHero({
  driverName,
  avatarUrl,
  country,
  rating,
  rank,
  totalRaces,
  actions,
  stats,
}: DashboardHeroProps) {
  return (
    <Box as="section" position="relative" overflow="hidden">
      {/* Background Pattern */}
      <Box
        position="absolute"
        inset="0"
        style={{
          background: 'linear-gradient(to bottom right, rgba(59, 130, 246, 0.1), #0f1115, rgba(147, 51, 234, 0.05))',
        }}
      />

      <Box
        position="relative"
        maxWidth="80rem"
        mx="auto"
        px={6}
        py={10}
      >
        <Stack gap={8}>
          <Stack direction="row" align="center" justify="between" wrap gap={8}>
            {/* Welcome Message */}
            <Stack direction="row" align="start" gap={5}>
              <Box position="relative">
                <Box
                  w="20"
                  h="20"
                  rounded="xl"
                  p={0.5}
                  style={{
                    background: 'linear-gradient(to bottom right, #3b82f6, #9333ea)',
                    boxShadow: '0 20px 25px -5px rgba(59, 130, 246, 0.2)',
                  }}
                >
                  <Box
                    w="full"
                    h="full"
                    rounded="lg"
                    overflow="hidden"
                    bg="bg-deep-graphite"
                  >
                    <Image
                      src={avatarUrl}
                      alt={driverName}
                      width={80}
                      height={80}
                      style={{ width: '100%', height: '100%', objectFit: 'cover' }}
                    />
                  </Box>
                </Box>
                <Box
                  position="absolute"
                  bottom="-1"
                  right="-1"
                  w="5"
                  h="5"
                  rounded="full"
                  bg="bg-performance-green"
                  border
                  style={{ borderColor: '#0f1115', borderWidth: '3px' }}
                />
              </Box>
              <Box>
                <Text size="sm" color="text-gray-400" block mb={1}>
                  Good morning,
                </Text>
                <Heading level={1} mb={2}>
                  {driverName}
                  <Text size="2xl" ml={3}>
                    {country}
                  </Text>
                </Heading>
                <Stack direction="row" align="center" gap={3} wrap>
                  <Badge variant="primary">
                    {rating}
                  </Badge>
                  <Badge variant="warning">
                    #{rank}
                  </Badge>
                  <Text size="xs" color="text-gray-500">
                    {totalRaces} races completed
                  </Text>
                </Stack>
              </Box>
            </Stack>

            {/* Quick Actions */}
            {actions && (
              <Stack direction="row" gap={3} wrap>
                {actions}
              </Stack>
            )}
          </Stack>

          {/* Quick Stats Row */}
          {stats && (
            <Box
              display="grid"
              gridCols={2}
              responsiveGridCols={{ md: 4 }}
              gap={4}
            >
              {stats}
            </Box>
          )}
        </Stack>
      </Box>
    </Box>
  );
}