'use client'

import { useActionState } from 'react'
import { ladderAdminText } from '@/lib/i18n/admin'
import { createLadderAction, type ActionResult } from './actions'

/** Ein neues Gefüge anlegen. Die Sprossen kommen danach im Editor dazu. */
export function NewLadderForm() {
  const [state, action, pending] = useActionState<ActionResult | null, FormData>(
    createLadderAction,
    null,
  )

  return (
    <form action={action} className="flex flex-wrap items-end gap-3">
      <label className="field-row">
        <span className="field-label">{ladderAdminText.name}</span>
        <input
          name="name"
          required
          maxLength={80}
          placeholder={ladderAdminText.namePlaceholder}
          className="field"
        />
      </label>
      <label className="field-row">
        <span className="field-label">{ladderAdminText.note}</span>
        <input
          name="note"
          maxLength={300}
          placeholder={ladderAdminText.notePlaceholder}
          className="field w-64"
        />
      </label>
      <button type="submit" disabled={pending} className="btn btn-primary">
        {pending ? ladderAdminText.creating : ladderAdminText.create}
      </button>
      {state && !state.ok ? (
        <span className="font-condensed text-2xs text-stamp-4">{state.error}</span>
      ) : null}
    </form>
  )
}