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

import { User } from 'lucide-react';
import { Box } from './Box';
import { Icon } from './Icon';
import { Surface } from './Surface';

export interface AvatarProps {
  src?: string;
  alt?: string;
  size?: 'sm' | 'md' | 'lg' | 'xl' | number;
  fallback?: string;
  className?: string;
  'data-testid'?: string;
}

export const Avatar = ({
  src,
  alt,
  size = 'md',
  fallback,
  className,
  'data-testid': dataTestId
}: AvatarProps) => {
  const sizeMap: Record<string, string> = {
    sm: '2rem',
    md: '3rem',
    lg: '4rem',
    xl: '6rem'
  };

  const iconSizeMap: Record<string, number> = {
    sm: 3,
    md: 5,
    lg: 8,
    xl: 12
  };

  const finalSize = typeof size === 'number' ? `${size / 4}rem` : sizeMap[size];
  const finalIconSize = typeof size === 'number' ? Math.round(size / 8) : iconSizeMap[size];

  return (
    <Surface
      data-testid={dataTestId}
      variant="muted"
      rounded="full"
      className={className}
      style={{ 
        width: finalSize, 
        height: finalSize, 
        overflow: 'hidden',
        border: '2px solid var(--ui-color-border-default)'
      }}
    >
      {src ? (
        <img 
          src={src} 
          alt={alt} 
          className="w-full h-full object-cover"
        />
      ) : (
        <Box center fullWidth fullHeight bg="var(--ui-color-bg-base)">
          {fallback ? (
            <span className="text-sm font-bold text-[var(--ui-color-text-med)]">{fallback}</span>
          ) : (
            <Icon icon={User} size={finalIconSize as any} intent="low" />
          )}
        </Box>
      )}
    </Surface>
  );
};