---
import { changeLanguage } from 'i18next';
import { getCollection } from 'astro:content';
import Layout from '@layouts/Layout.astro';
import Table from '@components/Table';
import { HeaderType, type Header } from '@components/Table/types';

changeLanguage('en');

const rawEntries = await getCollection('blog', ({ data }) => {
  return import.meta.env.PROD ? data.draft !== true : true;
});
const entries = rawEntries.map((item, idx) => ({
  ...item.data,
  id: idx + 1,
  slug: item.slug,
}));
const headers: Header[] = [
  {
    key: 'id',
    header: 'index',
    type: HeaderType.Index,
  },
  {
    key: 'title',
    header: 'Title',
    hasCustomCell: true,
    formatter: (data) => `<a href="blog/${data.slug}">${data.title}</a>`,
    type: HeaderType.String,
  },
  {
    key: 'tags',
    header: 'Tags',
    type: HeaderType.Multiple,
  },
];
---

<Layout title="List of blog entries">
  <h1>Blog's entries</h1>

  <section>
    <Table client:load data={entries} headers={headers} />
  </section>
</Layout>