---
import clsx from 'clsx';

import { PreferenceUpdater } from '@/components/docs/PreferenceUpdater';
import SidebarItem from '@/components/docs/SidebarItem.astro';
import type { SupportedFramework } from '@/types/docs';
import { filterSidebar } from '@/utils/docs/sidebar';

type Props = {
  framework: SupportedFramework;
  docTitles: Map<string, string>;
  class?: string;
};

const { framework, docTitles, class: className } = Astro.props;
const filteredSidebar = filterSidebar(framework);
---

<div class={clsx("bg-manila-light dark:bg-faded-black", className)}>
  <slot />
  <PreferenceUpdater client:idle currentFramework={framework} />
  <nav aria-label="Docs sidebar" class="p-6">
    {
      filteredSidebar.map((item) => (
        <SidebarItem item={item} framework={framework} docTitles={docTitles} />
      ))
    }
  </nav>
</div>