'use client'

import type { FormEvent } from 'react'

type Props = {
  action: (formData: FormData) => void | Promise<void>
  id: string
  confirmText: string
  label?: string
  /** Optional extra hidden form fields (e.g. batch_id for routing
   * the redirect target inside the action). */
  extra?: Record<string, string>
}

export function DeleteForm({
  action,
  id,
  confirmText,
  label = 'Delete',
  extra,
}: Props) {
  function onSubmit(e: FormEvent<HTMLFormElement>) {
    if (!window.confirm(confirmText)) {
      e.preventDefault()
    }
  }
  return (
    <form action={action} onSubmit={onSubmit} style={{ display: 'inline' }}>
      <input type="hidden" name="id" value={id} />
      {extra &&
        Object.entries(extra).map(([k, v]) => (
          <input key={k} type="hidden" name={k} value={v} />
        ))}
      <button type="submit" className="link-button" style={{ color: '#b91c1c' }}>
        {label}
      </button>
    </form>
  )
}