<script lang="ts">
  import { ToggleSwitchProps } from "../types";
  import styles from "./index.module.css";

  export let label: ToggleSwitchProps["label"];
  export let handleChange: ToggleSwitchProps["handleChange"];
  export let checked: ToggleSwitchProps["checked"];
  export let disabled: ToggleSwitchProps["disabled"];
</script>

<label class={styles.toggle}
  >{label}<input
    type="checkbox"
    class={`${styles.input} ${styles["sr-only"]}`}
    on:change={(event) => {
      handleChange(event);
    }}
    {checked}
    {disabled}
  /><span class={styles.display} /></label
>