/**
 * @factory/ui — Avatar (Radix `@radix-ui/react-avatar` wrapper).
 *
 * Fallback renders deterministic initials (`formatters.initials`) on a
 * name-hashed hue (`color.hashNameToHue` → 0–359, stable per person). The
 * hue is user-derived (not a theme token) — the one documented exception to
 * "no hard-coded colors".
 */
import * as React from "react";
import * as RadixAvatar from "@radix-ui/react-avatar";
import { clsx } from "clsx";
import { initials } from "../formatters.js";
import { hashNameToHue } from "../color.js";

export interface AvatarProps {
  src?: string;
  /** Name used for the initials fallback and the deterministic hue. */
  name: string;
  size?: "sm" | "md" | "lg";
  className?: string;
}

const SIZE: Record<NonNullable<AvatarProps["size"]>, string> = {
  sm: "h-6 w-6 text-[10px]",
  md: "h-8 w-8 text-xs",
  lg: "h-12 w-12 text-base",
};

export function Avatar({ src, name, size = "md", className }: AvatarProps) {
  const hue = hashNameToHue(name);
  return (
    <RadixAvatar.Root
      className={clsx("relative flex shrink-0 overflow-hidden rounded-full", SIZE[size], className)}
    >
      {src !== undefined && <RadixAvatar.Image src={src} alt={name} />}
      <RadixAvatar.Fallback
        className="flex items-center justify-center font-medium"
        style={{
          backgroundColor: `hsl(${hue} 45% 88%)`,
          color: `hsl(${hue} 55% 30%)`,
        }}
        aria-label={name}
      >
        {initials(name) || "?"}
      </RadixAvatar.Fallback>
    </RadixAvatar.Root>
  );
}