import { Chip } from "@nextui-org/react";
import {
  FaHourglass,
  FaCheck,
  FaXmark,
  FaCircleQuestion,
  FaPause,
} from "react-icons/fa6";

import { ParticipantStatus } from "@/types/participant-list/provisional-types";
import { STATUS_CONFIG } from "@/components/pages/client/participant-list/participants/utils";

const STATUS_ICONS: Record<ParticipantStatus, React.ReactNode> = {
  toReview: <FaHourglass className="size-2.5" />,
  accepted: <FaCheck className="size-2.5" />,
  rejected: <FaXmark className="size-2.5" />,
  queried: <FaCircleQuestion className="size-2.5" />,
  onHold: <FaPause className="size-2.5" />,
};

type StatusBadgeProps = {
  status: ParticipantStatus;
};

function StatusBadge({ status }: StatusBadgeProps) {
  const { label } = STATUS_CONFIG[status];

  return (
    <Chip
      classNames={{
        content: "font-medium px-1",
        base: "bg-black text-white text-xs px-2",
      }}
      startContent={STATUS_ICONS[status]}
    >
      {label}
    </Chip>
  );
}

export default StatusBadge;