import type { FC } from "hono/jsx"

export const Terminal: FC = async () => (
  <>
    <link rel="stylesheet" href="/css/terminal.css" />
    <link rel="stylesheet" href="/css/editor.css" />

    <div id="browser-controls" style="display:none">
      <a id="back-button" href="#"></a>
      <a id="forward-button" href="#"></a>
      <a id="stop-button" href="#"></a>
      <a id="reload-button" href="#">@</a>
      <a id="close-button" href="#">╳</a>
      <span id="browser-address">chris.nose-pluto.local</span>
    </div>

    <div id="command-line">
      <span id="command-prompt">&gt;</span>
      <textarea
        id="command-cursor"
        readonly={true}
        tabIndex={-1}
        rows={1}
      />
      <textarea
        type="text"
        id="command-textbox"
        autocomplete="off"
        autocorrect="off"
        autocapitalize="off"
        spellcheck={false}
        rows={1}
      />
      <textarea
        id="command-hint"
        readonly={true}
        tabIndex={-1}
        rows={1}
      />
    </div>

    <ul id="scrollback">
      <li class="center">**** NOSE PLUTO V{new Date().getMonth() + 1}.{new Date().getDate()} ****</li>
      <li class="center">VRAM <span id="vram-size">000KB</span></li>
    </ul>

    <div id="statusbar">
      <div class="line-cwd"><a href="#projects" id="project-name">root</a>: <a href="#ls" id="project-cwd">/</a></div>
      <div class="line-msg"><span id="statusbar-msg"></span></div>
    </div>
  </>
)