import React from "react";
import { DEFAULT_PTW_JOB_COLOR } from "../../utils/jobTypeHelpers.js";

export default function PtwFormDocument({
  jobTypeName = "GENERAL",
  permitNumber = "",
  jobColor = DEFAULT_PTW_JOB_COLOR,
  children
}) {
  return (
    <div
      className="ptw-doc-wrap"
      style={{ "--ptw-job-color": jobColor }}
    >
      <div className="ptw-doc-page">
        <div className="ptw-doc-page__body">
          <header className="ptw-doc-header">
            <div className="ptw-doc-header__hazard" aria-hidden />
            <div className="ptw-doc-header__title">
              <h4>PERMIT TO WORK</h4>
              <h3>{jobTypeName}</h3>
            </div>
            <div className="ptw-doc-header__permit">
              <span>Permit Number:</span>
              <div className="ptw-doc-header__permit-box">
                {permitNumber || "\u00A0"}
              </div>
            </div>
          </header>

          {children}

          <footer className="ptw-doc-sheet-footer" aria-hidden="true">
            <div className="ptw-doc-sheet-footer__stripe" />
          </footer>
        </div>
        <div className="ptw-doc-page__rail" aria-hidden="true" />
      </div>
    </div>
  );
}
