gridpilot.gg/apps/website/ui/DriverIdentity.tsx

import { Avatar } from '@/ui/Avatar';
import { Badge } from '@/ui/Badge';
import { Box } from '@/ui/Box';
import { Link } from '@/ui/Link';
import { Text } from '@/ui/Text';
import React from 'react';

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

export function DriverIdentity({ driver, href, contextLabel, meta, size = 'md', 'data-testid': dataTestId }: DriverIdentityProps) {
  const nameSize = size === 'sm' ? 'sm' : 'base';

  const content = (
    <Box data-testid={dataTestId} display="flex" alignItems="center" gap={3} flexGrow={1} minWidth="0">
      <Avatar
        data-testid="driver-avatar"
        src={driver.avatarUrl || undefined}
        alt={driver.name}
        size={size === 'sm' ? 'sm' : 'md'}
      />

      <Box flex={1} minWidth="0">
        <Box display="flex" alignItems="center" gap={2} minWidth="0">
          <Text data-testid="driver-name" size={nameSize as any} weight="medium" variant="high" truncate>
            {driver.name}
          </Text>
          {contextLabel && (
            <Badge variant="default" size="sm">
              {contextLabel}
            </Badge>
          )}
        </Box>
        {meta && (
          <Text size="xs" variant="low" block truncate>
            {meta}
          </Text>
        )}
      </Box>
    </Box>
  );

  if (href) {
    return (
      <Link href={href} block variant="inherit" underline="none">
        {content}
      </Link>
    );
  }

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