---
import { getAllCategories } from "@/content/photos/categories";
import { getSettings } from "@/content/settings/settings"
import { getImageUrl } from "@/lib/images";
import { getCategoryRoute } from "@/lib/routing";
import { Image } from "astro:assets";

const settings = await getSettings();
const categories = await getAllCategories(settings);
---

<div
    id={`categoryindex`}
    class="flex lg:flex-col flex-col py-12 px-12 lg:container mx-auto gap-y-10 gap-x-18 w-full"
>
    <div class="flex flex-col justify-center items-center gap-2.5">
        <h1 class="text-5xl font-bold">Categories</h1>
    </div>

    <div class="flex flex-col gap-5">
        { categories.map((category) => (
            <div class="flex flex-row justify-center items-center">
                <a href={getCategoryRoute(settings.photo, category)} class="group relative block w-[70%] overflow-hidden rounded-2xl shadow-md">
                    <div>
                        <Image
                            src={getImageUrl(category.thumbnail.url)}
                            alt={category.title}
                            width={category.thumbnail.width}
                            height={category.thumbnail.height}
                            class="rounded-2xl transition-transform duration-300 group-hover:scale-102"
                        />

                        <div class="absolute inset-0 bg-black/70 flex items-center justify-center p-6 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
                            <h3 class="text-white text-5xl font-bold text-center tracking-tight">
                                {category.title}
                            </h3>
                        </div>
                    </div>
                </a>
            </div>
        )) }
    </div>
</div>