import { GameCanvas } from "./components/GameCanvas";
import { Miscellaneous } from "./engine/config";

export const App = () => {
  return (
    <div className="main">
      <div id={Miscellaneous.MODAL_ID} className="modal">
        <div id={Miscellaneous.MODAL_CONTENT_ID} className="modal-content">
          <span className="close">&times;</span>
          <p>Some text in the Modal..</p>
        </div>
      </div>

      <div className="header">
        <div className="nav">
          <h1>the abstraction engine</h1>
        </div>
      </div>
      <div className="content">
        <GameCanvas width={Miscellaneous.WIDTH} height={Miscellaneous.HEIGHT} />
      </div>
      <div className="footer">
        <span>
          built by{" "}
          <a
            href="https://git.simponic.xyz/simponic"
            target="_blank"
            className="tf"
          >
            simponic
          </a>{" "}
          | inspired by{" "}
          <a href="https://hempuli.com/baba/" target="_blank">
            baba is you
          </a>
        </span>
      </div>
    </div>
  );
};