import React from 'react';

interface Props {
    isOn: boolean;
    handleToggle: () => void;
    onColor: string;
    name: string;
    value: number;
    disable: boolean;
  }

export const Switch: React.FC<Props> = ({isOn, handleToggle, onColor, name, value, disable }) => {
    return(
        <>
        <input
          checked={isOn}
          onChange={handleToggle}
          className="react-switch-checkbox"
          id={`switch`+name}
          type="checkbox"
          value={value}
          disabled={disable}
      />
      <label
        style={{ 'background' : isOn && onColor }}
        className="react-switch-label"
        htmlFor={`switch`+name}
      >
        <span className={`react-switch-button`} />
      </label>
      </>
    )
}