import React from 'react';
import { Box } from './Box';
import { Image } from './Image';
import { Link } from './Link';
import { PlaceholderImage } from './PlaceholderImage';
import { Stack } from './Stack';
import { Text } from './Text';

interface DriverSummaryPillProps {
  name: string;
  avatarSrc?: string | null;
  rating?: number | null;
  rank?: number | null;
  onClick?: () => void;
  href?: string;
  ratingComponent?: React.ReactNode;
}

export function DriverSummaryPill({
  name,
  avatarSrc,
  onClick,
  href,
  ratingComponent,
}: DriverSummaryPillProps) {
  const content = (
    <>
      <Box 
        w="8" 
        h="8" 
        rounded="full" 
        overflow="hidden" 
        bg="bg-charcoal-outline" 
        display="flex" 
        alignItems="center" 
        justifyContent="center" 
        border 
        borderColor="border-charcoal-outline/80"
      >
        {avatarSrc ? (
          <Image
            src={avatarSrc}
            alt={name}
            width={32}
            height={32}
            objectFit="cover"
            fill
          />
        ) : (
          <PlaceholderImage size={32} />
        )}
      </Box>

      <Stack direction="col" align="start" justify="center">
        <Text 
          size="xs" 
          weight="semibold" 
          color="text-white" 
          truncate 
          block
          style={{ maxWidth: '140px' }}
        >
          {name}
        </Text>
        {ratingComponent}
      </Stack>
    </>
  );

  if (href) {
    return (
      <Link 
        href={href} 
        block 
        display="flex"
        alignItems="center"
        gap={3}
        rounded="full"
        bg="bg-iron-gray/70"
        px={3}
        py={1.5}
        border
        borderColor="border-charcoal-outline/80"
        shadow="0 0 18px rgba(0,0,0,0.45)"
        transition
        hoverBorderColor="primary-blue/60"
        className="hover:bg-iron-gray"
      >
        {content}
      </Link>
    );
  }

  if (onClick) {
    return (
      <Box 
        as="button" 
        type="button" 
        onClick={onClick} 
        cursor="pointer"
        display="flex"
        alignItems="center"
        gap={3}
        rounded="full"
        bg="bg-iron-gray/70"
        px={3}
        py={1.5}
        border
        borderColor="border-charcoal-outline/80"
        shadow="0 0 18px rgba(0,0,0,0.45)"
        transition
        hoverBorderColor="primary-blue/60"
        className="hover:bg-iron-gray"
      >
        {content}
      </Box>
    );
  }

  return (
    <Box 
      display="flex"
      alignItems="center"
      gap={3}
      rounded="full"
      bg="bg-iron-gray/70"
      px={3}
      py={1.5}
      border
      borderColor="border-charcoal-outline/80"
    >
      {content}
    </Box>
  );
}