import React from 'react';

interface AvatarProps {
  name?: string;
  size?: number | 'small' | 'default' | 'large';
  isDarkMode?: boolean;
  className?: string;
  src?: string;
  backgroundColor?: string;
  onClick?: (e: React.MouseEvent) => void;
  style?: React.CSSProperties;
}

const Avatar: React.FC<AvatarProps> = ({
  name = '',
  size = 'default',
  isDarkMode = false,
  className = '',
  src,
  backgroundColor,
  onClick,
  style = {},
}) => {
  // Handle both numeric and string sizes
  const getSize = () => {
    if (typeof size === 'number') {
      return { width: size, height: size, fontSize: `${size * 0.4}px` };
    }

    const sizeMap = {
      small: { width: 24, height: 24, fontSize: '10px' },
      default: { width: 32, height: 32, fontSize: '14px' },
      large: { width: 48, height: 48, fontSize: '18px' },
    };

    return sizeMap[size];
  };

  const sizeStyle = getSize();

  const lightColors = [
    '#f56565',
    '#4299e1',
    '#48bb78',
    '#ed8936',
    '#9f7aea',
    '#ed64a6',
    '#667eea',
    '#38b2ac',
    '#f6ad55',
    '#4fd1c7',
  ];

  const darkColors = [
    '#e53e3e',
    '#3182ce',
    '#38a169',
    '#dd6b20',
    '#805ad5',
    '#d53f8c',
    '#5a67d8',
    '#319795',
    '#d69e2e',
    '#319795',
  ];

  const colors = isDarkMode ? darkColors : lightColors;
  const colorIndex = name.charCodeAt(0) % colors.length;
  const defaultBgColor = backgroundColor || colors[colorIndex];

  const handleClick = (e: React.MouseEvent) => {
    e.stopPropagation();
    onClick?.(e);
  };

  const avatarStyle = {
    ...sizeStyle,
    backgroundColor: defaultBgColor,
    ...style,
  };

  if (src) {
    return (
      <img
        src={src}
        alt={name}
        onClick={handleClick}
        className={`rounded-full object-cover shadow-sm cursor-pointer ${className}`}
        style={avatarStyle}
      />
    );
  }

  return (
    <div
      onClick={handleClick}
      className={`rounded-full flex items-center justify-center text-white font-medium shadow-sm cursor-pointer ${className}`}
      style={avatarStyle}
    >
      {name.charAt(0)?.toUpperCase() || '?'}
    </div>
  );
};

export default Avatar;