"use client";

import { useActionState } from "react";
import { createRejectionReasonAction } from "@/lib/actions/admin";

export function NewRejectionReasonForm() {
  const [state, formAction, pending] = useActionState(createRejectionReasonAction, {});

  return (
    <form
      action={formAction}
      className="bg-[var(--rk-surface)] border border-white/10 rounded-2xl p-6 flex gap-2 items-start flex-wrap"
    >
      <input
        name="label"
        placeholder="z. B. Terminüberschneidung"
        required
        className="flex-1 min-w-[12rem] bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
      />
      <button
        type="submit"
        disabled={pending}
        className="border border-white/30 rounded-lg px-4 py-2 text-xs uppercase tracking-[0.15em] hover:border-white disabled:opacity-50"
      >
        Hinzufügen
      </button>
      {state.error && <p className="w-full text-sm text-red-400">{state.error}</p>}
    </form>
  );
}