import { Icon } from '../Icon/Icon';

export const Avatar = ({
  src,
  alt = '',
  name,
  size = 'medium',
  variant = 'circle',
  className = '',
  ...props
}) => {
  const sizeClasses = {
    small: 'w-8 h-8 text-xs',
    medium: 'w-10 h-10 text-sm',
    large: 'w-12 h-12 text-base',
    xl: 'w-16 h-16 text-lg',
  };

  const variantClasses = {
    circle: 'rounded-full',
    square: 'rounded-lg',
  };

  const getInitials = (name) => {
    if (!name) return '';
    const parts = name.trim().split(' ');
    if (parts.length === 1) return parts[0][0].toUpperCase();
    return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
  };

  const baseClasses = `inline-flex items-center justify-center bg-gray-200 text-gray-600 font-medium ${sizeClasses[size]} ${variantClasses[variant]} ${className}`;

  if (src) {
    return (
      <img
        src={src}
        alt={alt || name}
        className={`${sizeClasses[size]} ${variantClasses[variant]} object-cover ${className}`}
        {...props}
      />
    );
  }

  if (name) {
    return (
      <div className={baseClasses} {...props}>
        {getInitials(name)}
      </div>
    );
  }

  return (
    <div className={baseClasses} {...props}>
      <Icon name="UserIcon" className="w-1/2 h-1/2" />
    </div>
  );
};

export default Avatar;

