import type { FC } from "hono/jsx"
import { BrowserControls } from "./browser/controls"

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

    <BrowserControls />

    <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-www"><a id="project-www" href="#">www</a></div>
      <div class="line-msg"><span id="statusbar-msg"></span></div>
    </div>
  </>
)