import { Switch } from "@kobalte/core/switch";
import "./Switch.sass";
import { Show } from "solid-js/web";

interface Props {
  label: string
  checked: boolean
  onChange: () => void
}

export default (props: Props) => {
  return (
    <>
      <Switch class="switch" checked={props.checked} onChange={props.onChange}>
        <Show when={props.label}>
          <Switch.Label class="switch__label">{props.label}</Switch.Label>
        </Show>
        <Switch.Input class="switch__input" />
        <Switch.Control class="switch__control">
          <Switch.Thumb class="switch__thumb" />
        </Switch.Control>
      </Switch>
    </>
  )
}