import React from 'react';
import { Box } from './primitives/Box';
import { Image } from './Image';
import { Surface } from './primitives/Surface';

interface AvatarProps {
  src?: string | null;
  alt: string;
  size?: number;
  className?: string;
}

export function Avatar({ src, alt, size = 40, className = '' }: AvatarProps) {
  return (
    <Surface
      variant="muted"
      rounded="full"
      border
      borderColor="border-charcoal-outline/50"
      className={className}
      w={`${size}px`}
      h={`${size}px`}
      flexShrink={0}
      overflow="hidden"
    >
      {src ? (
        <Image
          src={src}
          alt={alt}
          fullWidth
          fullHeight
          className="object-cover"
          fallbackSrc="/default-avatar.png"
        />
      ) : (
        <Box fullWidth fullHeight bg="bg-charcoal-outline" display="flex" center>
          <span className="text-gray-400 font-bold" style={{ fontSize: size * 0.4 }}>
            {alt.charAt(0).toUpperCase()}
          </span>
        </Box>
      )}
    </Surface>
  );
}