---
import { getCollection, render, type CollectionEntry } from 'astro:content';
import ArticleLayout from '../../layouts/ArticleLayout.astro';

export async function getStaticPaths() {
  const entries = await getCollection('episodes', ({ data }) => !data.draft);
  return entries.map((entry) => ({ params: { id: entry.id }, props: { entry } }));
}

interface Props { entry: CollectionEntry<'episodes'> }
const { entry } = Astro.props;
const { Content } = await render(entry);
---

<ArticleLayout
  title={entry.data.title}
  description={entry.data.description}
  kind={`Podcast · Episode ${entry.data.episode}`}
  author={entry.data.author}
  maintainers={entry.data.maintainers}
  published={entry.data.published}
  reviewed={entry.data.reviewed}
  status={entry.data.status}
  sourcePath={`src/content/episodes/${entry.id}.md`}
>
  {entry.data.audioUrl && <audio controls preload="metadata" src={entry.data.audioUrl}>Your browser does not support embedded audio.</audio>}
  <Content />
</ArticleLayout>

<style>
  audio { width: 100%; margin-bottom: 2.5rem; }
</style>