'use client';

import { useRef } from 'react';

export function ActionDialog({ label = 'Aktionen', title = 'Aktionen', children }) {
  const dialogRef = useRef(null);

  function openDialog() {
    dialogRef.current?.showModal();
  }

  function closeOnBackdrop(event) {
    if (event.target === event.currentTarget) {
      event.currentTarget.close();
    }
  }

  return (
    <>
      <button className="btn secondary" type="button" onClick={openDialog}>
        {label}
      </button>
      <dialog className="action-dialog" ref={dialogRef} onClick={closeOnBackdrop}>
        <div className="dialog-header">
          <h3>{title}</h3>
          <form method="dialog">
            <button className="btn secondary" type="submit">
              Schließen
            </button>
          </form>
        </div>
        <div className="action-dialog-body">{children}</div>
      </dialog>
    </>
  );
}