'use client'

import * as React from 'react'
import { TransitionButton } from '@/components/TransitionButton'
import { ActionMessageToast } from '@/components/ActionMessageToast'
import { updateUserProfileAction } from '@/actions/updateUserProfileAction'

export function ProfileForm() {
  const [isPending, startTransition] = React.useTransition()

  async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault()
    const formData = new FormData(e.currentTarget)

    startTransition(async () => {
      try {
        const res = await updateUserProfileAction(formData) // ActionResponse
        if (res?.success) ActionMessageToast.success('Profile updated')
        else ActionMessageToast.error(res?.error ?? 'Update failed')
      } catch {
        ActionMessageToast.error('Unexpected error')
      }
    })
  }

  return (
    <form onSubmit={onSubmit} className="grid gap-4">
      <input name="name" placeholder="Your name" />
      <TransitionButton type="submit" isPending={isPending}>
        Save changes
      </TransitionButton>
    </form>
  )
}