'use client'

import { useFormStatus } from 'react-dom'

function SubmitButton() {
  const { pending } = useFormStatus()

  return (
    <button disabled={pending} type="submit">
      {pending ? 'Saving...' : 'Save'}
    </button>
  )
}

export function ContactForm() {
  return (
    <form action={submitForm}>
      <input name="name" required />
      <textarea name="message" required />
      <SubmitButton />
    </form>
  )
}

'use client'

import { useFormState } from 'react-dom'
import { submitForm } from '@/app/actions'

export function MyForm() {
  const [state, formAction] = useFormState(submitForm, null)

  return (
    <form action={formAction}>
      <input name="email" type="email" required />
      <input name="message" required />

      {state?.error && <p className="text-red-600">{state.error}</p>}
      {state?.success && <p className="text-green-600">Sent!</p>}

      <button type="submit">Send</button>
    </form>
  )
}

// app/actions.ts
'use server'

export async function submitForm(previousState, formData) {
  try {
    const email = formData.get('email')
    const message = formData.get('message')

    // Validation
    if (!email || !message) {
      return { error: 'All fields required' }
    }

    // Process
    await sendEmail(email, message)

    return { success: true }
  } catch (error) {
    return { error: 'Failed to send' }
  }
}

'use client'

import { useFormState, useFormStatus } from 'react-dom'
import { addComment } from '@/app/actions'

function CommentSubmit() {
  const { pending } = useFormStatus()

  return (
    <button disabled={pending} type="submit">
      {pending ? 'Posting...' : 'Post Comment'}
    </button>
  )
}

export function CommentForm({ postId }) {
  const [state, formAction] = useFormState(
    (prev, data) => addComment(postId, data),
    null
  )

  return (
    <form action={formAction} className="space-y-4">
      <textarea
        name="content"
        placeholder="Your comment..."
        required
        className="w-full border p-2"
      />

      {state?.error && (
        <p className="text-red-600">{state.error}</p>
      )}

      {state?.success && (
        <p className="text-green-600">Comment posted!</p>
      )}

      <CommentSubmit />
    </form>
  )
}