import React from "react";

/**
 * @param {{
 *   open: boolean,
 *   document?: { document_name?: string, document_id?: number, document_number?: number } | null,
 *   onViewDocuments: () => void,
 * }} props
 */
export default function DocumentCreatedSuccessModal({
  open,
  document,
  onViewDocuments,
}) {
  if (!open || !document) return null;

  const name = document.document_name || "Untitled document";
  const id = document.document_id ?? "—";
  const revision = document.document_number ?? "—";

  return (
    <div className="swi-modal-backdrop" role="presentation">
      <div
        className="swi-modal swi-doc-created-modal"
        role="dialog"
        aria-modal="true"
        aria-labelledby="doc-created-modal-title"
        onClick={(event) => event.stopPropagation()}
      >
        <header className="swi-modal__head">
          <h2 id="doc-created-modal-title" className="swi-modal__title">
            Document created
          </h2>
        </header>

        <p className="swi-muted swi-doc-created-modal__intro">
          <strong>{name}</strong> has been registered successfully as document ID{" "}
          <strong>{id}</strong>, revision <strong>#{revision}</strong>, with status{" "}
          <span className="swi-status-badge swi-status-badge--opened">Opened</span>.
        </p>
        <p className="swi-doc-created-modal__note">
          You will be taken to <strong>My documents</strong> to review the full
          document list.
        </p>

        <div className="swi-modal-actions">
          <button
            type="button"
            className="swi-btn swi-btn--primary"
            onClick={onViewDocuments}
          >
            View my documents
          </button>
        </div>
      </div>
    </div>
  );
}
