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

interface Props {
  frameworks?: SupportedFramework[];
}

const { frameworks } = Astro.props;
const { framework } = Astro.params;

// Only render if current framework matches, or if no frameworks specified (all frameworks)
const shouldRender = !frameworks || frameworks.includes(framework as SupportedFramework);
---

{
  /*
    What I WANT to do is
    ```
    {shouldRender && <slot />}
    ```

    But I'm running into some crazy problems with hydration.
    Putting client:load in one of these conditionals causes Astro to just give up hydrating the whole app for some reason.
    TODO: fix this

    So, while I debug those... let's do this
  */
}
<div class="contents" hidden={!shouldRender}>
  <slot />
</div>