"use client";

import { cn } from "@/lib/utils/cn";
import { ELIGIBILITY_MODEL_LABELS } from "@/config/elections";
import type { EligibilityModel } from "@/types";

const DESCRIPTIONS: Record<EligibilityModel, string> = {
  member: "Each person on the roll gets one vote.",
  property: "Each voting entity (for example a unit) gets one vote.",
  shareholder: "Votes are weighted by the entity's share allocation.",
  custom: "Use your own entity mapping and weights.",
};

interface EligibilityModelPickerProps {
  value: EligibilityModel;
  onChange: (value: EligibilityModel) => void;
  disabled?: boolean;
}

export function EligibilityModelPicker({
  value,
  onChange,
  disabled,
}: EligibilityModelPickerProps) {
  return (
    <div className="grid gap-3 sm:grid-cols-2">
      {(Object.keys(ELIGIBILITY_MODEL_LABELS) as EligibilityModel[]).map((model) => (
        <button
          key={model}
          type="button"
          disabled={disabled}
          onClick={() => onChange(model)}
          className={cn(
            "rounded-lg border px-4 py-3 text-left",
            value === model ? "border-primary bg-[#EFF6FF]" : "border-border bg-white",
            disabled && "opacity-60"
          )}
        >
          <p className="text-[13px] font-bold">{ELIGIBILITY_MODEL_LABELS[model]}</p>
          <p className="mt-1 text-[12px] text-muted">{DESCRIPTIONS[model]}</p>
        </button>
      ))}
    </div>
  );
}