---
import { getCollection } from 'astro:content';
import BaseLayout from '@/layouts/BaseLayout.astro';
import Heading from '@/components/ui/Heading.astro';
import Search from '@/components/blog/Search.astro';
import {
	Pagination,
	PaginationContent,
	PaginationItem,
	PaginationLink,
	PaginationNext,
	PaginationPrevious,
} from '@/components/ui/pagination';

interface BlogPost {
	data: {
		title: string;
		description: string;
	};
	slug: string;
}

export async function getStaticPaths({ paginate }: { paginate: Function }) {
	const allBlogposts = await getCollection('blog');
	const postsPerPage = 4;

	return paginate(allBlogposts, {
		pageSize: postsPerPage,
	});
}

const {
	page,
}: {
	page: {
		data: BlogPost[];
		url: { prev: string; current: string; next: string };
		currentPage: number;
		lastPage: number;
	};
} = Astro.props;
---

<BaseLayout
	title={`Blog Page ${page.currentPage} | Astro Deploy`}
	description="Explore insightful articles on our Blog: Dive into a world of knowledge through posts crafted with expertise. Discover, learn, and grow with us.">
	<div class="container mx-auto px-4 py-8 sm:py-12 lg:px-8 lg:py-16 xl:max-w-7xl">
		<div class="text-center text-zinc-800 dark:text-zinc-200">
			<Heading level={1}>Blog</Heading>
			<Search />
			<p class="text-lg leading-relaxed text-zinc-600 dark:text-zinc-400">
				Here are some blogposts, they are located in the repository as mdx files.
			</p>
		</div>
		<hr class="my-8 border-t border-zinc-300 dark:border-zinc-700" />
		<div class="grid grid-cols-1 gap-8 md:grid-cols-2">
			{
				page.data.map((post) => (
					<div class="rotate-1 transform rounded-lg bg-white p-6 shadow-md transition-transform duration-300 hover:rotate-0 dark:bg-zinc-800">
						<h2
							transition:name={post.data.title}
							class="mb-2 text-xl font-semibold text-zinc-800 hover:text-zinc-600 dark:text-zinc-200 dark:hover:text-zinc-400">
							<a href={`/blog/${post.slug}/`}>{post.data.title}</a>
						</h2>
						<p class="mb-4 text-sm text-zinc-600 dark:text-zinc-400">{post.data.description}</p>
						<a
							class="text-primary-600 hover:text-primary-400 dark:text-primary-400 dark:hover:text-primary-300"
							href={`/blog/${post.slug}/`}>
							Read more
						</a>
					</div>
				))
			}
		</div>
		<div class="mt-12 text-center text-black dark:text-white">
			<Pagination>
				<PaginationContent>
					{
						page.currentPage > 1 && (
							<>
								<PaginationItem>
									<PaginationPrevious href={`${page.url.prev}/`} />
								</PaginationItem>
								<PaginationItem>
									<PaginationLink href="/blog/">1</PaginationLink>
								</PaginationItem>
							</>
						)
					}
					<PaginationItem>
						<PaginationLink href={`${page.url.current}/`} isActive
							>{page.currentPage}
						</PaginationLink>
					</PaginationItem>
					{
						page.currentPage < page.lastPage && (
							<>
								<PaginationItem>
									<PaginationLink href={`/blog/${page.lastPage}/`}>{page.lastPage}</PaginationLink>
								</PaginationItem>
								<PaginationItem>
									<PaginationNext href={`${page.url.next}/`} />
								</PaginationItem>
							</>
						)
					}
				</PaginationContent>
			</Pagination>
		</div>
	</div>
</BaseLayout>