import { User } from "lucide-react";
import { adminPhoto } from "@/services/profile";
import { cn } from "@/lib/cn";

export function Avatar({
  src,
  name,
  size = "md",
  className,
}: {
  src?: string | null;
  name?: string | null;
  size?: "sm" | "md" | "lg";
  className?: string;
}) {
  const resolved = adminPhoto(src ?? null);
  const sizes = {
    sm: "h-7 w-7 text-xs",
    md: "h-9 w-9 text-sm",
    lg: "h-16 w-16 text-xl",
  } as const;

  return (
    <span
      className={cn(
        "relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-primary-soft text-primary ring-1 ring-primary/10",
        sizes[size],
        className,
      )}
      aria-label={name ?? undefined}
    >
      {resolved ? (
        // eslint-disable-next-line @next/next/no-img-element
        <img src={resolved} alt={name ?? ""} className="h-full w-full object-cover" />
      ) : (
        <User className={cn("h-1/2 w-1/2")} aria-hidden />
      )}
    </span>
  );
}