import { Avatar } from "@nextui-org/react";
import { FaUser } from "react-icons/fa6";

import { FieldConfig, FieldKey } from "@/types/participant-list/provisional-types";
import { isFieldVisible } from "@/components/pages/client/participant-list/common/utils";

type ParticipantAvatarProps = {
  firstName: string;
  lastName: string;
  visibilityControls: FieldConfig[];
  size?: "sm" | "md";
};

function ParticipantAvatar({
  firstName,
  lastName,
  visibilityControls,
  size = "md",
}: ParticipantAvatarProps) {
  const visible = (key: FieldKey) => isFieldVisible(key, visibilityControls);

  const firstInitial = visible("firstName") ? (firstName?.[0] ?? "") : "";
  const lastInitial = visible("lastName") ? (lastName?.[0] ?? "") : "";
  const hasInitials = firstInitial || lastInitial;

  const sizeClass = size === "sm" ? "size-8 text-[10px]" : "size-10 text-xs";

  return (
    <Avatar
      showFallback
      classNames={{
        base: `${sizeClass} bg-midnightBlue text-white shrink-0`,
        name: "font-semibold",
        fallback: "text-white/70",
      }}
      fallback={
        hasInitials ? (
          <span className="font-semibold text-white">
            {(firstInitial + lastInitial).toUpperCase()}
          </span>
        ) : (
          <FaUser className="size-3.5" />
        )
      }
    />
  );
}

export default ParticipantAvatar;