<script lang="ts">
import './layout.css'
import favicon from '$lib/assets/favicon.svg'
import Header from '$lib/components/layout/Header.svelte'
import Footer from '$lib/components/layout/Footer.svelte'
import Breadcrumbs from '$lib/components/ui/Breadcrumbs.svelte'
import type { BreadcrumbItem } from '$lib/types/breadcrumbs'

let { children, data } = $props<{
    children: any;
    data: {
        breadcrumbs?: { crumbs: BreadcrumbItem[] };
    };
}>()
</script>

<svelte:head>
	<link rel="icon" href={favicon} />
</svelte:head>

<Header />

<main class="min-h-svh pt-20">
	<div class="py-4 px-6">
		<Breadcrumbs crumbs={data.breadcrumbs?.crumbs} />
	</div>

	{@render children()}
</main>

<Footer />
