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

export interface AvatarProps {
  driverId?: string;
  src?: string;
  alt: string;
  size?: number;
  className?: string;
  border?: boolean;
}

export function Avatar({ 
  driverId, 
  src, 
  alt, 
  size = 40, 
  className = '',
  border = true,
}: AvatarProps) {
  const avatarSrc = src || (driverId ? `/media/avatar/${driverId}` : undefined);

  return (
    <Box
      display="flex"
      alignItems="center"
      justifyContent="center"
      rounded="full"
      overflow="hidden"
      bg="bg-charcoal-outline/20"
      border={border}
      borderColor="border-charcoal-outline/50"
      className={className}
      style={{ width: size, height: size, flexShrink: 0 }}
    >
      {avatarSrc ? (
        <Image
          src={avatarSrc}
          alt={alt}
          className="w-full h-full object-cover"
          fallbackSrc="/default-avatar.png"
        />
      ) : (
        <Icon icon={User} size={size > 32 ? 5 : 4} color="text-gray-500" />
      )}
    </Box>
  );
}