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
      className={`inline-flex shrink-0 items-center justify-center rounded-full font-bold text-white ${SIZE_CLASSES[size]}`}
      style={{ backgroundColor: bg }}
    >
      {initials(firstName, lastName)}
    </span>
  );
}
