<script lang="ts">
  export let id: string | undefined = undefined;
  export let name: string | undefined = undefined;
  export let checked: boolean = false;
</script>

<label class="h-fit relative inline-flex items-center cursor-pointer">
  <input
    {id}
    {name}
    {checked}
    type="checkbox"
    value="true"
    class="sr-only peer"
    on:change={(e) => {
      e.currentTarget.value = e.currentTarget.checked ? 'true' : 'false';
    }} />
  <div
    class="w-11 h-6 bg-button-secondary-active-solid hover:bg-button-secondary-selected peer-checked:hover:bg-accent-hover peer-checked:bg-accent rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-icon-active after:rounded-full after:h-5 after:w-5 after:transition-all transition-colors" />
</label>
