<template>
	<div>
		<Header :covers="covers" :is-dark-mode="isDarkMode" />
		<slot />
		<Footer :covers="covers" />
		<CookieBanner />
	</div>
</template>

<script setup lang="ts">
import type { CoverNavItem } from "~/types";
import { slugify } from "~/utils/slugify";

const isDarkMode = ref(false);

// Fetch covers (SSR-safe)
const { data: coversData } = await useFetch("/api/product-covers", {
	transform: (response: { data?: Array<{ id: string | number; attributes?: { name: string; binding?: string; sort?: number }; name?: string; binding?: string; sort?: number }> }) =>
		response.data?.map((cover) => {
			const name = cover.attributes?.name ?? cover.name ?? "";
			return {
				label: name,
				id: cover.id,
				slug: slugify(name),
				description: cover.attributes?.binding ?? cover.binding ?? "",
				sort: cover.attributes?.sort ?? cover.sort ?? 0
			};
		}) ?? []
});

const covers = computed<CoverNavItem[]>(() => coversData.value ?? []);

function toggleDarkMode(value: boolean) {
	isDarkMode.value = value;
}

// Provide to children
provide("toggleDarkMode", toggleDarkMode);
</script>
