"use client";

import { useActionState } from "react";
import { rejectLabel } from "@/lib/actions/labels";
import {
  REJECTION_REASONS,
  REJECTION_REASON_LABELS,
} from "@/lib/rejection-reasons";

export function RejectLabelForm({ labelId }: { labelId: string }) {
  const [state, formAction, isPending] = useActionState(
    rejectLabel,
    undefined,
  );

  return (
    <form action={formAction} className="flex flex-col gap-2">
      <input type="hidden" name="labelId" value={labelId} />
      <select
        name="reason"
        required
        className="rounded border border-charcoal/20 bg-warm-white px-3 py-1.5 text-sm text-charcoal"
      >
        {REJECTION_REASONS.map((reason) => (
          <option key={reason} value={reason}>
            {REJECTION_REASON_LABELS[reason]}
          </option>
        ))}
      </select>
      <input
        type="text"
        name="note"
        placeholder="Note (optional)"
        className="rounded border border-charcoal/20 bg-warm-white px-3 py-1.5 text-sm text-charcoal"
      />
      <button
        type="submit"
        disabled={isPending}
        className="rounded-full border border-terracotta px-4 py-1.5 text-sm font-medium text-terracotta hover:bg-terracotta/10 disabled:opacity-60"
      >
        {isPending ? "Rejecting..." : "Reject"}
      </button>
      {state?.error && (
        <p className="text-xs text-terracotta">{state.error}</p>
      )}
    </form>
  );
}