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

const rawGames = await getCollection('games');

let games = rawGames.map((item, idx) => ({
  ...item.data,
  id: idx + 1,
  slug: item.slug,
  customCell: item.data.has_content
    ? `<a href="games/${item.slug}">${item.data.title}</a>`
    : `<div>${item.data.title}</div>`,
}));

games = games.sort((a, b) => b.date_added.getTime() - a.date_added.getTime());

const headers: Header[] = [
  {
    key: 'id',
    header: 'index',
    type: HeaderType.Index,
  },
  {
    key: 'title',
    header: 'Title',
    type: HeaderType.String,
    hasCustomCell: true,
  },
  {
    key: 'status',
    header: 'Status',
    type: HeaderType.Select,
  },
  {
    key: 'genres',
    header: 'Genres',
    type: HeaderType.Multiple,
  },
  {
    key: 'times_played',
    header: 'Times Played',
    type: HeaderType.Number,
  },
  {
    key: 'registered_hours',
    header: 'Registered Hours',
    type: HeaderType.Number,
  },
];
---

<Layout title="List of games">
  <h1>Games</h1>

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