<script lang="ts">
	import Cookies from "js-cookie";
	import { Sun, Moon } from "radix-svelte-icons";

	export let lightTheme: boolean = Cookies.get("theme") === "light" ? true : false;
</script>

<label class="hover:bg-gray-200 rounded-lg p-3 cursor-pointer">
	<input
		type="checkbox"
		class="theme-controller hidden"
		value={"light"}
		bind:checked={lightTheme}
		on:change={() => {
			Cookies.set("theme", lightTheme ? "light" : "dark");
		}}
	/>

	{#if lightTheme}
		<Sun class="fill-current" size={24} />
	{:else}
		<Moon class="swap-off fill-current" size={24} />
	{/if}
</label>