import styles from './UserAvatar.module.css';

interface UserAvatarProps {
  firstName: string;
  lastName: string;
  avatar?: string | null;
  size?: number;
  className?: string;
}

export function UserAvatar({
  firstName,
  lastName,
  avatar,
  size = 36,
  className,
}: UserAvatarProps) {
  const initials = `${firstName.charAt(0)}${lastName.charAt(0)}`.toUpperCase();

  if (avatar) {
    return (
      <img
        src={avatar}
        alt={`${firstName} ${lastName}`}
        className={`${styles.avatar} ${className ?? ''}`}
        style={{ width: size, height: size }}
      />
    );
  }

  return (
    <div
      className={`${styles.avatar} ${styles.initials} ${className ?? ''}`}
      style={{ width: size, height: size, fontSize: size * 0.4 }}
      aria-label={`${firstName} ${lastName}`}
    >
      {initials}
    </div>
  );
}