---
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("es");

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",
        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>