import type { CSSProperties } from "react";
import { assetUrl } from "../lib/api";
import { avatarColor, initials } from "../lib/avatar";

export function UserAvatar({
  userId,
  name,
  avatarUrl,
  className,
  style,
}: {
  userId: string | number | null | undefined;
  name: string | null | undefined;
  avatarUrl?: string | null;
  className: string;
  style?: CSSProperties;
}) {
  const color = avatarColor(userId == null ? null : String(userId));
  const photo = assetUrl(avatarUrl);
  return (
    <span className={className} style={{ background: color.bg, color: color.fg, ...style }}>
      {photo ? <img className="user-avatar-image" src={photo} alt="" /> : initials(name)}
    </span>
  );
}