"use client";

import { cn } from "@/lib/utils/cn";
import {
  AUTHORIZATION_STATUS_LABELS,
  ELIGIBILITY_STATUS_LABELS,
} from "@/config/elections";
import type { AuthorizationRecordStatus, EligibilityStatus } from "@/types";

const ELIGIBILITY_STYLES: Record<EligibilityStatus, string> = {
  eligible: "bg-success-bg text-success",
  blocked: "bg-danger-bg text-danger",
  pending_authorization: "bg-warning-bg text-warning",
};

const AUTH_STYLES: Record<AuthorizationRecordStatus, string> = {
  valid: "bg-success-bg text-success",
  missing: "bg-warning-bg text-warning",
  rejected: "bg-danger-bg text-danger",
  superseded: "bg-[#F1F5F9] text-muted",
};

export function AuthorizationStatusBadge({
  status,
}: {
  status: AuthorizationRecordStatus | null | undefined;
}) {
  if (!status) {
    return (
      <span className="inline-flex items-center rounded-full bg-[#F1F5F9] px-2.5 py-1 text-[11.5px] font-bold text-muted">
        None
      </span>
    );
  }

  return (
    <span
      className={cn(
        "inline-flex items-center rounded-full px-2.5 py-1 text-[11.5px] font-bold",
        AUTH_STYLES[status]
      )}
    >
      {AUTHORIZATION_STATUS_LABELS[status]}
    </span>
  );
}

export function EligibilityStatusBadge({
  status,
}: {
  status: EligibilityStatus;
}) {
  return (
    <span
      className={cn(
        "inline-flex items-center rounded-full px-2.5 py-1 text-[11.5px] font-bold",
        ELIGIBILITY_STYLES[status]
      )}
    >
      {ELIGIBILITY_STATUS_LABELS[status]}
    </span>
  );
}