"use client";

import { LayoutGrid } from "lucide-react";
import Link from "next/link";
import * as React from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { CategoryService } from "@/services/category.service";
import type { Category } from "@/types/content";

export default function CategoriesPage() {
	const [categories, setCategories] = React.useState<Category[]>([]);
	const [loading, setLoading] = React.useState(true);

	React.useEffect(() => {
		CategoryService.getAll()
			.then(setCategories)
			.finally(() => setLoading(false));
	}, []);

	return (
		<div className="max-w-4xl mx-auto py-8 px-4">
			<div className="flex items-center gap-2 mb-8">
				<LayoutGrid className="h-6 w-6" />
				<h1 className="text-3xl font-bold">Catégories</h1>
			</div>

			<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
				{loading
					? Array.from({ length: 6 }).map((_, i) => (
							/* biome-ignore lint/suspicious/noArrayIndexKey: skeleton items don't have unique IDs */
							<Card key={`skeleton-${i}`} className="animate-pulse">
								<CardHeader className="h-24 bg-zinc-100 dark:bg-zinc-800 rounded-t-lg" />
								<CardContent className="h-12" />
							</Card>
						))
					: categories.map((category) => (
							<Link key={category.id} href={`/category/${category.slug}`}>
								<Card className="hover:border-primary transition-colors cursor-pointer group h-full">
									<CardHeader className="bg-zinc-50 dark:bg-zinc-900 group-hover:bg-primary/5 transition-colors">
										<CardTitle className="text-lg">{category.name}</CardTitle>
									</CardHeader>
									<CardContent className="pt-4">
										<p className="text-sm text-muted-foreground">
											{category.description ||
												`Découvrez tous les mèmes de la catégorie ${category.name}.`}
										</p>
									</CardContent>
								</Card>
							</Link>
						))}
			</div>
		</div>
	);
}