---

import type { CollectionEntry } from 'astro:content';
import { getCollection, render } from 'astro:content';
import { ArrowUpRight } from 'lucide-react';
import FormattedDate from '@/components/FormattedDate.astro';
import defaultMarkdownComponents from '@/components/typography/defaultMarkdownComponents';
import Blog from '@/layouts/Blog.astro';

export async function getStaticPaths() {
  const entries = await getCollection('changelog');
  return entries.map((entry) => ({
    params: { slug: entry.id },
    props: entry,
  }));
}
type Props = CollectionEntry<'changelog'>;

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

const title = `v${entry.data.version}`;
const description =
  entry.data.description || `What's new in Video.js ${title} — new features, bug fixes, and improvements.`;
---

<Blog title={[title, "Changelog"]} description={description}>
  <article
    class="@container text-p2 sm:text-p15"
    data-search-content
    data-llms-content
    data-llms-description={description}
    data-llms-sort={entry.data.date.toISOString()}
    data-site="changelog"
  >
    <header
      class="relative mx-auto mb-10 max-w-3xl border-y border-faded-black py-10 dark:border-manila-light"
    >
      <div
        class="mb-3 flex flex-col gap-2 font-display text-h4 font-bold text-orange uppercase sm:flex-row sm:gap-4"
      >
        <FormattedDate date={entry.data.date} />
        {
          entry.data.breaking && (
            <>
              <span class="hidden sm:inline">&bull;</span>
              <span>Breaking changes</span>
            </>
          )
        }
      </div>
      <h1 class="mb-2 font-display text-h2 leading-tight uppercase sm:text-h15">
        {title}
      </h1>
      <a
        href={entry.data.compareUrl}
        class="inline-flex items-center gap-1 underline intent:decoration-gold"
        target="_blank"
        rel="noopener noreferrer"
      >
        Compare changes on GitHub <ArrowUpRight size="1em" aria-hidden="true" />
      </a>
    </header>
    <Content components={{ ...defaultMarkdownComponents }} />
  </article>
</Blog>
