<script lang="ts">
    export let checked: boolean;

    export let leftIcon: string | null = null;
    export let rightIcon: string | null = null;

    export let invertColor = false;
</script>

<div class="flex items-center gap-1">
    {#if leftIcon}
        <img src={leftIcon} class={`h-6 ${invertColor && "dark:invert"}`} alt="" />
    {/if}
    <label class="relative inline-flex cursor-pointer items-center">
        <input on:change {checked} type="checkbox" value="" class="peer sr-only" />
        <div
            class="h-6 w-11 rounded-full border-2 border-contrast-100 outline-2 transition-colors after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border-2 after:border-contrast-100 after:bg-contrast-900 after:transition-all after:content-[''] peer-checked:bg-accent peer-checked:after:translate-x-full dark:peer-focus:ring-accent"
        ></div>
    </label>
    {#if rightIcon}
        <img src={rightIcon} class={`h-6 ${invertColor && "dark:invert"}`} alt="" />
    {/if}
</div>
