import type { CSSProperties } from "react";

/**
 * Чисто презентационный аватар: картинка по url или инициал ника как заглушка.
 * Используется и в своём, и в чужом профиле, и в списках (общий примитив без логики).
 */
export function Avatar({
  url,
  nickname,
  size = 40,
}: {
  url?: string | null;
  nickname: string;
  size?: number;
}) {
  const box: CSSProperties = {
    width: size,
    height: size,
    borderRadius: "50%",
    flexShrink: 0,
  };
  if (url) {
    return (
      <img
        src={url}
        alt={nickname}
        width={size}
        height={size}
        style={{ ...box, objectFit: "cover", border: "1px solid var(--border)" }}
      />
    );
  }
  const initial = (nickname.trim()[0] ?? "?").toUpperCase();
  return (
    <div
      aria-hidden
      style={{
        ...box,
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        background: "var(--surface-2)",
        border: "1px solid var(--border)",
        color: "var(--text-muted)",
        fontWeight: 700,
        fontSize: size * 0.42,
      }}
    >
      {initial}
    </div>
  );
}