---
import directus from '@/lib/directus.ts';
import { readItems } from '@directus/sdk';

import { Image } from 'astro:assets';

const DIRECTUS_URL = process.env.DIRECTUS_URL || 'https://directus.astro.deployn.de';

import BaseLayout from '@/layouts/BaseLayout.astro';
import Heading from '@/components/ui/Heading.astro';

const recipes = await directus.request(
	readItems('Recipe', {
		fields: ['name', 'description', 'image'],
		sort: ['name'],
	})
);
---

<BaseLayout
	title="Recipes | Astro Deploy"
	description="Feast on favorite recipes: A curated collection of delightful dishes, sourced directly from our CMS. Discover new flavors and inspire your culinary journey.">
	<div class="container mx-auto px-4 py-16 sm:py-24 lg:px-8 lg:py-32 xl:max-w-7xl">
		<div class="mb-12 text-center text-zinc-900 dark:text-zinc-200">
			<Heading level={1}>Recipes</Heading>
			<p class="mt-5">
				Here are some of my favorite recipes. They are fetched through Directus CMS.
			</p>
		</div>
		<hr class="mb-12 dark:border-zinc-700/75" />
		<ul class="grid gap-y-12 sm:grid-cols-2 sm:gap-x-6 lg:grid-cols-3 xl:gap-x-8">
			{
				recipes.map((recipe) => (
					<li class="overflow-hidden rounded-lg bg-white shadow dark:bg-zinc-800">
						<Image
							class="h-48 w-full object-cover"
							src={`${DIRECTUS_URL}/assets/${recipe.image}`}
							inferSize
							alt={recipe.name}
						/>
						<div class="p-6">
							<h2 class="text-xl font-semibold text-zinc-900 dark:text-zinc-100">{recipe.name}</h2>
							<p class="mt-2 text-base text-zinc-600 dark:text-zinc-400">{recipe.description}</p>
						</div>
					</li>
				))
			}
		</ul>
	</div>
</BaseLayout>