import { spawnFunctionDraft } from "./scrowlStore";

type Props = {
  // TODO
}

export function Controls(props: Props) {
  return (
    <aside
      style={{
        position: "sticky", 
        top: "2rem", 
        height: "fit-content"
      }}
    >
      <article>
        <header>Controls</header>

        <div style={{ display: "flex", gap: "0.5rem", "flex-wrap": "wrap" }}>
          <button 
            class="outline secondary" 
            onClick={spawnFunctionDraft}
            style={{ padding: "2px 8px", "font-size": "0.8rem", width: "auto" }}
          >
            +fn
          </button>
          
          <button 
            class="outline secondary" 
            style={{ padding: "2px 8px", "font-size": "0.8rem", width: "auto" }}
            disabled
          >
            +signal
          </button>
        </div>

        <footer>
          <small>Language v0.1.0</small>
        </footer>
      </article>
    </aside>
  );
}
