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

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

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

  return (
    <Stack 
      bg="var(--ui-color-bg-surface)" 
      rounded="xl" 
      border 
      borderColor="var(--ui-color-border-low)" 
      overflow="hidden"
      position="relative"
    >
      {/* Background Accent */}
      <Stack 
        position="absolute" 
        top={0} 
        left={0} 
        right={0} 
        height="24" 
        bg="linear-gradient(to right, rgba(25, 140, 255, 0.2), transparent)"
        opacity={0.5}
      />

      <Stack p={6} position="relative">
        <Stack direction={{ base: 'col', md: 'row' }} gap={6} align={{ base: 'start', md: 'center' }}>
          {/* Avatar */}
          <Stack 
            width="32" 
            height="32" 
            rounded="2xl" 
            overflow="hidden" 
            border 
            borderColor="var(--ui-color-border-low)" 
            bg="var(--ui-color-bg-base)" 
            flexShrink={0}
          >
            <Image 
              src={avatarUrl || defaultAvatar} 
              alt={name} 
              fill 
              objectFit="cover" 
            />
          </Stack>

          {/* Info */}
          <Stack flexGrow={1}>
            <Stack gap={2}>
              <Stack direction="row" align="center" gap={3} wrap>
                <Text as="h1" size="3xl" weight="bold" variant="high">
                  {name}
                </Text>
                <RatingBadge rating={rating} ratingLabel={ratingLabel} size="lg" />
              </Stack>
              
              <Stack direction="row" align="center" gap={4} wrap>
                <Text size="sm" variant="low">
                  {nationality}
                </Text>
                {globalRankLabel && (
                  <Text size="sm" variant="low">
                    Global Rank: <Text variant="warning" weight="semibold">{globalRankLabel}</Text>
                  </Text>
                )}
              </Stack>

              {bio && (
                <Text size="sm" variant="low" maxWidth="2xl" mt={2} lineClamp={2}>
                  {bio}
                </Text>
              )}
            </Stack>
          </Stack>

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