import * as React from 'react';

import s from './Switch.module.scss';
import classNames from 'classnames/bind';

const cn = classNames.bind(s);

interface ISwitchProps {
  isOn: boolean;
  onToggle(): any;
  color?: string;
}

export default class Switch extends React.Component<ISwitchProps> {
  static defaultProps = {
    color: 'ocean',
  };

  render() {
    const { isOn, onToggle, color } = this.props;

    return (
      <>
        <input
          value={isOn ? 'on' : 'off'}
          checked={isOn}
          onChange={onToggle}
          className={s.switch__checkbox}
          type="checkbox"
        />
        <label className={cn(s.switch__label, `color-${color}`, { isOn })} onClick={onToggle}>
          <span className={cn(s.switch__label, 'button')} />
        </label>
      </>
    );
  }
}