<script lang="ts">
	import IconCheck from "~icons/tabler/check";
	import IconX from "~icons/tabler/x";
	import Button from "../ui/Button.svelte";

    let { 
        label,
        sublabel = "",
        name,
        checked,
        options = ["Yes", "No"],
        ...others
     } = $props();
</script>

<div class="flex gap-x-10 gap-y-3 flex-wrap mb-5 items-center">
    <label for={name} class="block w-1/3 min-w-[300px]">
        <p>{label}</p>
        {#if sublabel.length > 0}
            <p class="text-sm text-neutral-400 dark:text-neutral-600">{sublabel}</p>    
        {/if}
    </label>

    <input class="hidden" type="checkbox" id={name} name={name} defaultChecked={checked}/>
    <Button Icon={checked ? IconCheck : IconX} type="button" inverted={!checked} {...others} onclick={() => checked = !checked}>{checked ? options[0] : options[1]}</Button>
</div>