---
import GuideHeader from '../../components/GuideHeader.astro';
import BaseLayout from '../../layouts/BaseLayout.astro';
import { getAllGuides, GuideFileType } from '../../lib/guide';
import '../../styles/prism.css';

export interface Props {
  guide: GuideFileType;
}

export async function getStaticPaths() {
  const guides = await getAllGuides();

  return guides.map((guide) => ({
    params: { guideId: guide.id },
    props: { guide },
  }));
}

const { guideId } = Astro.params;
const { guide } = Astro.props;
---

<BaseLayout title='Simple Guide'>
  <GuideHeader guide={guide} />

  <div class='bg-gray-50 py-5 sm:py-10'>
    <div class='container prose prose-code:bg-transparent prose-h2:text-3xl prose-h2:mt-4 prose-h2:mb-2 prose-h3:mt-2 prose-img:mt-1'>
      <guide.Content />
    </div>
  </div>
</BaseLayout>