<script lang="ts">
	import { applyAppearance } from "@orochibraru/ui/appearance";
	import { Button } from "@orochibraru/ui/button";

	let corners = $state("rounded");

	function toggleCorners() {
		corners = corners === "rounded" ? "square" : "rounded";
		applyAppearance(
			document.documentElement,
			{
				accent: document.documentElement.dataset.accent ?? "blue",
				theme: "system",
				darkVariant: "default",
				font: "default",
				corners,
			},
			matchMedia("(prefers-color-scheme: dark)").matches,
		);
	}
</script>

<Button variant="outline" onclick={toggleCorners}>
	Corners: {corners}
</Button>

<script lang="ts">
	import { ModeWatcher } from "mode-watcher";

	import { appearanceBootScript } from "@orochibraru/ui/appearance";

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

<svelte:head>
	{@html appearanceBootScript(data.appearance)}
</svelte:head>

<ModeWatcher defaultMode={data.appearance.theme} />
{@render children()}