---
import type { InferGetStaticPropsType, GetStaticPaths } from 'astro';
import { getCollection } from 'astro:content';
import Layout from '@layouts/Layout.astro';
import Toc from '@components/Toc/Toc';
import Gallery from '@components/MediaGallery/Gallery';

export const getStaticPaths = (async () => {
  const entries = await getCollection('portafolio');

  return entries.map((entry) => ({
    params: { slug: entry.slug },
    props: entry,
  }));
}) satisfies GetStaticPaths;

type Props = InferGetStaticPropsType<typeof getStaticPaths>;

const entry = Astro.props;
const { Content, headings } = await entry.render();
---

<Layout title={entry.data.title}>
  <h1>{entry.data.title}</h1>

  <Gallery items={entry.data.media} />

  <Toc headings={headings} />

  <Content />
</Layout>