"use client";

import { useState } from "react";

import { clsx } from "@/lib/cx";

export type AvatarSize = "sm" | "md" | "lg";

const SIZE_CLASS: Record<AvatarSize, string> = {

  sm: "h-8 w-8 text-[11px]",

  md: "h-11 w-11 text-[12px]",

  lg: "h-20 w-20 text-xl",

};

export function initialsOf(name: string): string {

  const cleaned = name.replace(/\(.*?\)/g, "").trim();

  const parts = cleaned.split(/\s+/).filter(Boolean);

  if (parts.length === 0) return "?";

  if (parts.length === 1) {

    return parts[0].slice(0, 2).toUpperCase();

  }

  const last = parts[parts.length - 1];

  return (parts[0][0] + (last[0] ?? "")).toUpperCase();

}

export function MemberAvatar({

  name,

  photoUrl,

  size = "sm",

  className,

}: {

  name: string;

  photoUrl?: string | null;

  size?: AvatarSize;

  className?: string;

}) {

  const [broken, setBroken] = useState(false);

  const showImg = !!photoUrl && !broken;

  return (

    <span

      aria-hidden="true"

      className={clsx(

        "relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden rounded-full border border-line bg-graphite font-mono font-semibold uppercase tracking-tight text-ash",

        SIZE_CLASS[size],

        className

      )}

    >

      <span className="leading-none">{initialsOf(name)}</span>

      {showImg ? (

        <img

          src={photoUrl || undefined}

          alt=""

          loading="lazy"

          decoding="async"

          referrerPolicy="no-referrer"

          onError={() => setBroken(true)}

          className="absolute inset-0 h-full w-full object-cover"

        />

      ) : null}

    </span>

  );

}