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

export interface AvatarProps {
  src?: string;
  alt?: string;
  size?: 'sm' | 'md' | 'lg' | 'xl';
  fallback?: string;
}

export const Avatar = ({ 
  src, 
  alt, 
  size = 'md',
  fallback 
}: AvatarProps) => {
  const sizeMap = {
    sm: '2rem',
    md: '3rem',
    lg: '4rem',
    xl: '6rem'
  };

  const iconSizeMap = {
    sm: 3,
    md: 5,
    lg: 8,
    xl: 12
  } as const;

  return (
    <Surface 
      variant="muted" 
      rounded="full" 
      style={{ 
        width: sizeMap[size], 
        height: sizeMap[size], 
        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={iconSizeMap[size]} intent="low" />
          )}
        </Box>
      )}
    </Surface>
  );
};