---
import { ThemeSelect } from "@components/hooks/ThemeSwitch";
import type { TypeData } from "@config/io/types";
import Nav from "@components/navigation/sidebars/nav/index.astro";
import TOC from "@components/navigation/sidebars/TOC.astro";
import type { ConfigHeading } from "@components/navigation/sidebars/types";
import Search from "./navigation/Search.astro";

interface Props {
  title?: string;
  headings?: ConfigHeading[];
  type?: TypeData;
}

const { title, headings, type } = Astro.props;
---
<div class="header">
  <div class="header-item header-left">
    <Nav mobile={true}/>
    <h3 class="header-title">
      <a href="/">Quickshell</a>
    </h3>
  </div>
  <div class="header-item header-right">
    <Search/>
    <ThemeSelect client:load />
    <TOC title={title} headings={headings} type={type} mobile={true}/>
  </div>
</div>