import { UserRound } from "lucide-react";
import { initialsFromName, resolveAvatarUrl } from "@/lib/auth";
import { cn } from "@/lib/utils";

export function UserAvatar({
  name,
  avatarUrl,
  size = "md",
  className,
}: {
  name: string;
  avatarUrl?: string | null | undefined;
  size?: "sm" | "md" | "lg" | "xl";
  className?: string;
}) {
  const initials = initialsFromName(name || "User");
  const src = resolveAvatarUrl(avatarUrl);
  const sizeClass = {
    sm: "size-8 text-[11px]",
    md: "size-9 text-[12px]",
    lg: "size-14 text-[16px]",
    xl: "size-20 text-[22px]",
  }[size];

  if (src) {
    return (
      <img
        src={src}
        alt=""
        className={cn(
          "shrink-0 rounded-full object-cover ring-1 ring-border/60",
          sizeClass,
          className,
        )}
      />
    );
  }

  return (
    <span
      className={cn(
        "inline-flex shrink-0 items-center justify-center rounded-full bg-primary-soft font-bold text-primary",
        sizeClass,
        className,
      )}
      aria-hidden="true"
    >
      {initials || <UserRound size={size === "xl" ? 28 : size === "lg" ? 22 : 14} />}
    </span>
  );
}