---
import type { ChangelogFileType } from '../../lib/changelog';
import { DateTime } from 'luxon';

interface Props {
  changelog: ChangelogFileType;
}

const { changelog } = Astro.props;
const { data: frontmatter } = changelog;
const { Content } = await changelog.render();

const formattedDate = DateTime.fromJSDate(frontmatter.date).toFormat(
  'dd LLL, yyyy',
);
---

<div class='relative'>
  <span
    class='absolute -left-6 top-2 h-2 w-2 flex-shrink-0 rounded-full bg-gray-300'
  ></span>

  <div class='mb-3 flex items-center gap-2'>
    <span class='flex-shrink-0 text-xs tracking-wide text-gray-400'>
      {formattedDate}
    </span>
    <span class='truncate text-base font-medium'>
      {frontmatter.title}
    </span>
  </div>

  <div class='rounded-xl border bg-white p-6'>
    <div
      class='prose prose-sm prose-h2:mt-3 prose-h2:text-lg prose-h2:font-medium prose-p:mb-0 prose-blockquote:font-normal prose-blockquote:text-gray-500 prose-ul:my-0 prose-ul:rounded-lg prose-ul:bg-gray-100 prose-ul:px-4 prose-ul:py-4 prose-ul:pl-7 prose-img:mt-0 prose-img:rounded-lg [&>blockquote>p]:mt-0 [&>ul>li]:my-0 [&>ul>li]:mb-1 [&>ul]:mt-3'
    >
      <Content />
    </div>
  </div>
</div>