import React from 'react'

import './index.scss'

interface Props {
  name: string
  checked: boolean
  editable: boolean
  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void
}

const ToggleSwitch: React.FC<Props> = (props: Props) => {
  return (
    <div className="toggle-switch">
      <input
        className="toggle-switch-checkbox"
        name={props.name}
        id={props.name}
        type="checkbox"
        checked={props.checked}
        disabled={!props.editable}
        onChange={props.onChange}
      />
      <label className="toggle-switch-label" htmlFor={props.name}>
        <span className="toggle-switch-switch" />
      </label>
    </div>
  )
}

export default ToggleSwitch