import * as React from "react";
import { cn } from "@/lib/utils";

type Size = "xs" | "sm" | "md" | "lg" | "xl";
type Variant = "client" | "corelia";

type Props = {
  /** Initiales à afficher (1 à 3 caractères, automatiquement uppercase). */
  initials: string;
  /** "client" = aplat neutre, "corelia" = aplat ambre signé (agents support, etc.). */
  variant?: Variant;
  size?: Size;
  /** Forme carrée arrondie (entreprise/société) ou ronde (personne). */
  shape?: "rounded" | "circle";
  className?: string;
  /** Label accessible si la signification n'est pas évidente depuis le contexte. */
  ariaLabel?: string;
};

const sizeClasses: Record<Size, string> = {
  xs: "size-7 text-micro",
  sm: "size-8 text-micro",
  md: "size-9 text-xxs",
  lg: "size-10 text-xs",
  xl: "size-12 text-sm",
};

const variantClasses: Record<Variant, string> = {
  // Aplat neutre warm, pour les sociétés/personnes clientes ou tiers.
  client: "bg-stone-200/60 border-border-strong text-text",
  // Aplat bronze signé pour les agents Novelia et la marque elle-même.
  corelia: "bg-accent/10 border-accent/30 text-accent",
};

/**
 * Avatar à aplat (pas de gradient).
 * Aucune image distante : seules les initiales, pour rester sous contrôle visuel
 * et éviter les sauts de layout. Une variante image sera ajoutée plus tard si besoin.
 */
export function Avatar({
  initials,
  variant = "client",
  size = "md",
  shape = "rounded",
  className,
  ariaLabel,
}: Props) {
  const label = initials.slice(0, 3).toUpperCase();
  return (
    <span
      aria-label={ariaLabel}
      role={ariaLabel ? "img" : undefined}
      className={cn(
        "inline-flex shrink-0 items-center justify-center border font-semibold uppercase select-none",
        shape === "circle" ? "rounded-full" : "rounded-md",
        sizeClasses[size],
        variantClasses[variant],
        className,
      )}
    >
      {label}
    </span>
  );
}