import React, { ChangeEvent } from 'react';
import { Wrapper } from './styles';

type ToggleProps = {
  value: boolean;
  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
  onBlur?: () => void;
  name?: string;
  disabled?: boolean;
};

const Toggle = ({ value, onBlur, onChange, name, disabled }: ToggleProps) => {
  return (
    <Wrapper disabled={disabled}>
      <input
        name={name}
        type="checkbox"
        checked={value}
        onBlur={onBlur}
        onChange={onChange}
        value={value ? 'true' : 'false'}
        disabled={disabled}
      />
      <span />
    </Wrapper>
  );
};

export default Toggle;