import React from 'react';
import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';
import { Stack } from '@/ui/Stack';
import { Image } from '@/ui/Image';
import { RatingBadge } from '@/components/drivers/RatingBadge';

interface DriverHeaderPanelProps {
  name: string;
  avatarUrl?: string;
  nationality: string;
  rating: number;
  globalRank?: number | null;
  bio?: string | null;
  actions?: React.ReactNode;
}

export function DriverHeaderPanel({
  name,
  avatarUrl,
  nationality,
  rating,
  globalRank,
  bio,
  actions
}: DriverHeaderPanelProps) {
  const defaultAvatar = 'https://cdn.gridpilot.com/avatars/default.png';

  return (
    <Box 
      bg="bg-panel-gray" 
      rounded="xl" 
      border 
      borderColor="border-charcoal-outline" 
      overflow="hidden"
      position="relative"
    >
      {/* Background Accent */}
      <Box 
        position="absolute" 
        top={0} 
        left={0} 
        right={0} 
        height="24" 
        bg="bg-gradient-to-r from-primary-blue/20 to-transparent"
        opacity={0.5}
      />

      <Box p={6} position="relative">
        <Stack direction={{ base: 'col', md: 'row' }} gap={6} align="start" className="md:items-center">
          {/* Avatar */}
          <Box 
            width="32" 
            height="32" 
            rounded="2xl" 
            overflow="hidden" 
            border 
            borderColor="border-charcoal-outline"
            bg="bg-graphite-black"
            flexShrink={0}
          >
            <Image 
              src={avatarUrl || defaultAvatar} 
              alt={name} 
              fill 
              objectFit="cover" 
            />
          </Box>

          {/* Info */}
          <Box flexGrow={1}>
            <Stack gap={2}>
              <Stack direction="row" align="center" gap={3} wrap>
                <Text as="h1" size="3xl" weight="bold" color="text-white">
                  {name}
                </Text>
                <RatingBadge rating={rating} size="lg" />
              </Stack>
              
              <Stack direction="row" align="center" gap={4} wrap>
                <Text size="sm" color="text-gray-400">
                  {nationality}
                </Text>
                {globalRank !== undefined && globalRank !== null && (
                  <Text size="sm" color="text-gray-400">
                    Global Rank: <Text color="text-warning-amber" weight="semibold">#{globalRank}</Text>
                  </Text>
                )}
              </Stack>

              {bio && (
                <Text size="sm" color="text-gray-400" className="max-w-2xl mt-2" lineClamp={2}>
                  {bio}
                </Text>
              )}
            </Stack>
          </Box>

          {/* Actions */}
          {actions && (
            <Box flexShrink={0}>
              {actions}
            </Box>
          )}
        </Stack>
      </Box>
    </Box>
  );
}