import React, { useState } from "react";
import useTheme from "../context/theme";

function ThemeBtn() {

  const {themeMode, lightheme, darktheme}= useTheme()

  const onChangeBtn = (e) => {
    const darkThemestatus = e.currentTarget.checked
    if(darkThemestatus){
        darktheme()
    }else{
        lightheme()
    }
  };
  

  return (
    <div>
      <label className="relative inline-flex items-center cursor-pointer">
        <input
          type="checkbox"
          className="sr-only peer"
          onChange={onChangeBtn}
          checked= {themeMode ==="dark"}
        />
        <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
      </label>
    </div>
  );
}

export default ThemeBtn;
