import Link from 'next/link';
import Image from 'next/image';
import { PlaceholderImage } from './PlaceholderImage';
import { Box } from './Box';
import { Text } from './Text';
import { Badge } from './Badge';

export interface DriverIdentityProps {
  driver: {
    id: string;
    name: string;
    avatarUrl: string | null;
  };
  href?: string;
  contextLabel?: React.ReactNode;
  meta?: React.ReactNode;
  size?: 'sm' | 'md';
}

export function DriverIdentity(props: DriverIdentityProps) {
  const { driver, href, contextLabel, meta, size = 'md' } = props;

  const avatarSize = size === 'sm' ? 40 : 48;
  const nameSize = size === 'sm' ? 'sm' : 'base';

  const avatarUrl = driver.avatarUrl;

  const content = (
    <Box display="flex" alignItems="center" gap={{ base: 3, md: 4 }} flexGrow={1} minWidth="0">
      <Box
        rounded="full"
        bg="bg-primary-blue/20"
        overflow="hidden"
        display="flex"
        alignItems="center"
        justifyContent="center"
        flexShrink={0}
        style={{ width: avatarSize, height: avatarSize }}
      >
        {avatarUrl ? (
          <Image
            src={avatarUrl}
            alt={driver.name}
            width={avatarSize}
            height={avatarSize}
            className="w-full h-full object-cover"
          />
        ) : (
          <PlaceholderImage size={avatarSize} />
        )}
      </Box>

      <Box flexGrow={1} minWidth="0">
        <Box display="flex" alignItems="center" gap={2} minWidth="0">
          <Text size={nameSize} weight="medium" color="text-white" className="truncate">
            {driver.name}
          </Text>
          {contextLabel && (
            <Badge variant="default" className="bg-charcoal-outline/60 text-[10px] md:text-xs">
              {contextLabel}
            </Badge>
          )}
        </Box>
        {meta && (
          <Text size="xs" color="text-gray-400" mt={0.5} className="truncate" block>
            {meta}
          </Text>
        )}
      </Box>
    </Box>
  );

  if (href) {
    return (
      <Link href={href} className="flex items-center gap-3 md:gap-4 flex-1 min-w-0">
        {content}
      </Link>
    );
  }

  return <Box display="flex" alignItems="center" gap={{ base: 3, md: 4 }} flexGrow={1} minWidth="0">{content}</Box>;
}