---
import Layout from "../layouts/Layout.astro";
import TerminalComponent from "../components/Terminal.tsx";
import "../styles/global.css";
---

<Layout>
    <div class="container mx-auto p-4 max-w-6xl w-full">
        <div class="mb-4 text-center">
            <h1 class="text-2xl font-bold mb-2">Terminal Mode</h1>
            <p class="text-base-content/70">Type 'help' to get started.</p>
        </div>
        <div class="h-[60vh] max-h-[500px] min-h-[400px]">
            <TerminalComponent client:load />
        </div>
    </div>
</Layout>

<style>
    /* Remove overflow hidden from body to allow normal scrolling */
    html,
    body {
        height: auto;
        overflow: auto;
    }
</style>
