---
import type { GetStaticPathsOptions, Page } from 'astro';
import { type CollectionEntry, getCollection } from 'astro:content';
import BaseLayout from '../../layouts/BaseLayout.astro';
import Pagination from '../../components/Pagination.astro';
import ProjectPreview from '../../components/ProjectPreview.astro';
import siteConfig from '../../data/site-config';
import { sortItemsByDateDesc } from '../../utils/data-utils';

export async function getStaticPaths({ paginate }: GetStaticPathsOptions) {
    const projects = (await getCollection('projects')).sort(sortItemsByDateDesc);
    return paginate(projects, { pageSize: siteConfig.projectsPerPage || 6 });
}

type Props = { page: Page<CollectionEntry<'projects'>> };

const { page } = Astro.props;
const portfolio = page.data;
---

<BaseLayout
    title="Portfolio"
    description="Explore a diverse portfolio showcasing my passion and expertise"
    image={{ src: '/dante-preview.jpg', alt: 'The preview of the site' }}
    showHeader={false}
>
    <h1 class="mb-12 text-2xl leading-tight font-serif italic sm:mb-16 sm:text-4xl">Projects</h1>
    {portfolio.map((project) => <ProjectPreview project={project} class="mb-10 sm:mb-12" />)}
    <Pagination page={page} class="my-16 sm:my-24" />
</BaseLayout>
