"use client";

import { useActionState } from "react";
import { useTranslations } from "next-intl";
import { requestPayoutAction } from "@/app/actions";

export function PayoutForm() {
  const t = useTranslations("wallet");
  const [state, action, pending] = useActionState(
    async (_s: unknown, formData: FormData) => requestPayoutAction(formData),
    null as Awaited<ReturnType<typeof requestPayoutAction>> | null,
  );
  return (
    <form action={action} className="card space-y-3 p-5">
      <label className="block space-y-1 text-sm">
        <span>{t("method")}</span>
        <input name="method" required className="w-full rounded-xl border border-line px-3 py-2" />
      </label>
      <label className="block space-y-1 text-sm">
        <span>{t("details")}</span>
        <textarea name="details" required className="w-full rounded-xl border border-line px-3 py-2" />
      </label>
      <label className="block space-y-1 text-sm">
        <span>{t("amount")}</span>
        <input
          name="amount"
          type="number"
          step="0.01"
          min="1"
          required
          className="w-full rounded-xl border border-line px-3 py-2"
        />
      </label>
      {state && "error" in state && state.error ? (
        <p className="text-sm text-red-700">{t(state.error)}</p>
      ) : null}
      {state && "ok" in state && state.ok ? <p className="text-sm text-brand">{t("request")}</p> : null}
      <button disabled={pending} className="rounded-full bg-brand px-4 py-2 text-white">
        {t("request")}
      </button>
    </form>
  );
}