---
import type { SupportedFramework, SupportedStyle } from '@/types/docs';

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

type Props<F extends SupportedFramework = SupportedFramework> = {
  framework: F;
  style: SupportedStyle<F>;
  docTitles: Map<string, string>;
};

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

<slot />
<PreferenceUpdater client:idle currentFramework={framework} currentStyle={style} />
<nav class="p-6 text-dark-80">
  {filteredSidebar.map((item) => <SidebarItem item={item} framework={framework} style={style} docTitles={docTitles} />)}
</nav>