---
import type { InferGetStaticPropsType, GetStaticPaths } from "astro";
import { changeLanguage } from "i18next";
import { getCollection } from "astro:content";
import Layout from "@layouts/Layout.astro";
import Card from "@components/Card.astro";
import Pagination from "@components/Pagination.astro";
import { Image } from "astro:assets";

changeLanguage("en");

export const getStaticPaths = (async ({ paginate }) => {
    const rawEntries = await getCollection("portafolio", ({ data }) => {
        return import.meta.env.PROD ? data.draft !== true : true;
    });
    const entries = rawEntries.map((item, idx) => ({
        ...item.data,
        id: idx + 1,
        slug: item.slug,
    }));
    return paginate(entries, { pageSize: 6 });
}) satisfies GetStaticPaths;
type Props = InferGetStaticPropsType<typeof getStaticPaths>;
const { page } = Astro.props;
---

<Layout title="List of blog entries">
  <h1 class="text-center">Projects</h1>

  <section class="clean">
    <div class="grid grid-cols-1 grid-lg-cols-3 gap-4">
      {
        page.data.map((item) => (
          <div>
            <Card className="anim-hover-zoom h-100">
              <a class="clean" href={`/projects/${item.slug}`}>
                <Image
                  src={item.thumbnail}
                  alt="project img"
                  class="border-radius respect-width"
                />
                <h3 class="fs-4 text-center my-1">{item.title}</h3>
                <p class="text-justify">{item.brief}</p>
              </a>
              <div class="text-end" slot="footer">
                <a href={`/projects/${item.slug}`}>See more...</a>
              </div>
            </Card>
          </div>
        ))
      }
    </div>
    <Pagination page={page} urlPattern="/projects/{}" />
  </section>
</Layout>

<style lang="scss">
  a.clean {
    color: var(--prj-text);

    &:hover {
      text-decoration: none;
    }
  }
</style>