import { avatarColorFor } from "@/lib/colors";
import { initials } from "@/lib/format";

type AvatarProps = {
  firstName: string;
  lastName: string;
  color?: string | null;
  size?: "sm" | "md" | "lg";
};

const SIZE_CLASSES: Record<NonNullable<AvatarProps["size"]>, string> = {
  sm: "h-7 w-7 text-xs",
  md: "h-9 w-9 text-sm",
  lg: "h-14 w-14 text-lg",
};

export function Avatar({ firstName, lastName, color, size = "md" }: AvatarProps) {
  const bg = color ?? avatarColorFor(`${firstName}${lastName}`);
  return (
    <span
      // A white ring separates adjacent avatars in the org chart and lets a
      // strongly coloured one sit on a tinted row without vibrating against
      // it. aria-hidden because the name is always rendered next to it —
      // otherwise a screen reader reads the initials and then the name again.
      className={`inline-flex shrink-0 select-none items-center justify-center rounded-full font-bold leading-none text-white ring-2 ring-white ${SIZE_CLASSES[size]}`}
      style={{ backgroundColor: bg }}
      aria-hidden
    >
      {initials(firstName, lastName)}
    </span>
  );
}