"use client";

import { useState, useTransition } from "react";
import { Button } from "@/components/ui";
import { inputClass } from "@/components/ui/form";
import { createFormAction } from "@/lib/actions/forms";

export function NewForm({ base, siteId }: { base: string; siteId: string }) {
  const [pending, start] = useTransition();
  const [error, setError] = useState<string | null>(null);
  return (
    <form className="flex flex-wrap items-start gap-2" action={(f) => { setError(null); start(async () => { const r = await createFormAction(base, siteId, String(f.get("name") ?? "")); if (r && !r.ok) setError(r.fieldErrors?.name ?? r.error); }); }}>
      <div>
        <label htmlFor="new-form-name" className="sr-only">Form name</label>
        <input id="new-form-name" name="name" required maxLength={120} placeholder="New form name" className={`${inputClass} w-64`} aria-invalid={error ? true : undefined} />
        {error ? <p role="alert" className="mt-1 text-xs text-danger">{error}</p> : null}
      </div>
      <Button type="submit" disabled={pending}>{pending ? "Creating…" : "Create form"}</Button>
    </form>
  );
}