---
export const prerender = false;

import PageLayout from "@/layouts/Base.astro";
import WineCard from "@/components/page/WineCard.astro";

const meta = {
	title: "/cellar",
	description: "My wine tasting log",
};

const CELLAR_API_URL =
	import.meta.env.CELLAR_API_URL ?? "https://cellar.stevedylan.dev";

let wines: any[] = [];
let error: string | null = null;
try {
	const res = await fetch(`${CELLAR_API_URL}/api/wines`);
	if (res.ok) {
		wines = await res.json();
	} else {
		error = `API returned ${res.status}`;
	}
} catch (e) {
	error = e instanceof Error ? e.message : "Failed to reach cellar API";
}
---

<PageLayout meta={meta}>
	<div class="flex min-h-screen flex-col items-start justify-start gap-6">
    <h1 class="title">/cellar</h1>
		{error ? (
			<p class="text-red-400 text-sm">Could not load wines: {error}</p>
		) : wines.length === 0 ? (
			<p class="text-zinc-400 text-sm">no wines yet</p>
		) : (
			<div class="flex flex-col w-full">
				{wines.map((wine: any) => (
					<WineCard wine={wine} cellarApiUrl={CELLAR_API_URL} />
				))}
			</div>
		)}
	</div>
</PageLayout>