import * as React from 'react'
import { IToggleProps } from './interfaces'
const Toggle = ({ initialValue, settingName, updateSetting, onChange }: IToggleProps) => (
  <div className="onoffswitch">
    <input
      type="checkbox"
      name={`onoffswitch-${settingName}`}
      className="onoffswitch-checkbox"
      id={`onoffswitch-${settingName}`}
      defaultChecked={initialValue}
      onChange={(e: any) => {
        !!onChange && onChange()
        return updateSetting({ [settingName]: e.target.checked })
      }}
    />
    <label className="onoffswitch-label" htmlFor={`onoffswitch-${settingName}`}>
      <span className="onoffswitch-inner" />
      <span className="onoffswitch-switch" />
    </label>
  </div>
)

export default Toggle