<script lang="ts">
	import '../app.css';
	import { metaTitle } from '$lib/stores/metaTitle.svelte';
	import metaImage from '$lib/assets/img/meta.png';
	import { Toaster } from '$lib/components/ui/sonner';
	import Navbar from '$lib/components/layouts/Navbar.svelte';
	import Footer from '$lib/components/layouts/Footer.svelte';
	import { page } from '$app/state';

	let { children, data } = $props();
</script>

<svelte:head>
	<link rel="canonical" href={`https://${page.url.host}${page.url.pathname}`} />
	<title>
		{$metaTitle.title} | Korean Skin Care and Beauty Clinic
	</title>
	<meta name="title" content="{$metaTitle.title} | Korean Skin Care and Beauty Clinic" />
	<meta name="description" content={$metaTitle.description} />

	<meta property="og:type" content="website" />
	<meta property="og:url" content="https://koreanskincareandclinic.com" />
	<meta property="og:title" content="{$metaTitle.title} | Korean Skin Care and Beauty Clinic" />
	<meta property="og:description" content={$metaTitle.description} />
	<meta property="og:image" content={metaImage} />

	<meta property="twitter:card" content="summary_large_image" />
	<meta property="twitter:url" content="https://koreanskincareandclinic.com" />
	<meta
		property="twitter:title"
		content="{$metaTitle.title} | Korean Skin Care and Beauty Clinic"
	/>
	<meta property="twitter:description" content={$metaTitle.description} />
	<meta property="twitter:image" content={metaImage} />
</svelte:head>

<Toaster position="top-center" richColors />
<div class="mx-auto grid min-h-[100dvh] grid-rows-[auto_1fr_auto]">
	<Navbar category={data?.category} user={data?.locals} />
	<main>
		{@render children?.()}
	</main>
	<Footer user={data?.locals} />
</div>
