import Image from "next/image";
import { type HTMLAttributes } from "react";
import { cn } from "@/lib/utils";

export interface AvatarProps extends HTMLAttributes<HTMLDivElement> {
  src?: string | null;
  alt: string;
  initials?: string;
  size?: "sm" | "md" | "lg";
}

const sizeClasses = {
  sm: "size-9 text-xs",
  md: "size-11 text-sm",
  lg: "size-14 text-base",
} as const;

function getInitials(alt: string, initials?: string): string {
  if (initials) return initials.slice(0, 2).toUpperCase();
  const parts = alt.trim().split(/\s+/).filter(Boolean);
  if (parts.length === 0) return "?";
  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
  return `${parts[0][0] ?? ""}${parts[1][0] ?? ""}`.toUpperCase();
}

export function Avatar({
  src,
  alt,
  initials,
  size = "md",
  className,
  ...props
}: AvatarProps) {
  const fallback = getInitials(alt, initials);

  return (
    <div
      className={cn(
        "relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full",
        "bg-surface-elevated font-inter font-semibold text-brand-green",
        "ring-2 ring-border",
        sizeClasses[size],
        className,
      )}
      {...props}
    >
      {src ? (
        <Image
          src={src}
          alt={alt}
          fill
          sizes={size === "lg" ? "56px" : size === "md" ? "44px" : "36px"}
          className="object-cover"
        />
      ) : (
        <span aria-hidden="true">{fallback}</span>
      )}
      <span className="sr-only">{alt}</span>
    </div>
  );
}