import React, { useState } from "react";

export const ToggleButton = (props:{toggleButton:any , defaultToggle:boolean}) => {
  const { toggleButton , defaultToggle} = props;
  const [selectedValue, setSelectedValue] = useState(defaultToggle);

  const handleChange = (event:any) => {
    const isChecked = event.target.checked;
    toggleButton(isChecked);
    setSelectedValue(isChecked);
  };

  return (
    <>
      <input
        className="fr-checkbox"
        id={`fr-switch-new`}
        type="checkbox"
        checked={selectedValue}
        onChange={handleChange}
      />
      <label className="fr-switch-label" htmlFor={`fr-switch-new`}>
        <span className={`fr-switch-button`} />
      </label>
    </>
  );
};