import type { User } from "@/lib/types";

interface AvatarProps {
  user: User | null | undefined;
  size?: "sm" | "lg";
  title?: string;
}

/** Avatar circular con iniciales. Muestra un placeholder si no hay asignado. */
export function Avatar({ user, size = "sm", title }: AvatarProps) {
  const className = `avatar${size === "lg" ? " avatar-lg" : ""}`;

  if (!user) {
    return (
      <span className={`${className} avatar-unassigned`} title={title ?? "Sin asignar"} aria-label="Sin asignar">
        <i className="bx bx-user" />
      </span>
    );
  }

  return (
    <span
      className={className}
      style={{ background: user.color }}
      title={title ?? user.name}
      aria-label={user.name}
    >
      {user.initials}
    </span>
  );
}