type ModemToggleProps = {
  showSettings: boolean;
  onShowSettings: (showSettings: boolean) => void;
};

const ModemToggle = ({ showSettings, onShowSettings }: ModemToggleProps) => {
  return (
    <div className=" text-xl items-center m-2">
      <label className="flex flex-row space-x-2 items-center w-[70%] md:w-[50%]">
        <span>Automatically set</span>
        <input
          name="advancedSettings"
          type="checkbox"
          checked={showSettings}
          onChange={(e) => onShowSettings(e.target.checked)}
          id="advancedSettings"
          className="sr-only peer"
          value=""
        />
        <div
          className="relative w-10 h-5 rounded-full bg-gray-300 transition peer-checked:bg-blue-500 after:content-[''] 
      after:absolute after:top-0.5 after:left-0.5 after:w-4 after:h-4 after:rounded-full after:bg-white after:shadow after:transition 
      after:duration-300 peer-checked:after:translate-x-5"
        ></div>
      </label>
    </div>
  );
};

export default ModemToggle;