import React from "react";
import Toggle, { ToggleProps } from "react-toggle";

export interface ToggleSliderProps extends ToggleProps {
  name: string;
  label: string;
  error: string;
  readOnly?: boolean;
  defaultChecked: boolean;
}

export default function ToggleSlider({
  name,
  label,
  error,
  readOnly,
  defaultChecked,
  ...rest
}: ToggleSliderProps) {
  return (
    <div className="form-group">
      <label htmlFor={name}>{label}</label>
      <Toggle {...rest} id={name} name={name} defaultChecked={defaultChecked} />
      {error && <div className="alert alert-danger">{error}</div>}
    </div>
  );
}