import React, { useState } from "react";
// import * as ReactSwitch from "@radix-ui/react-switch";

const ThemeButton = () => {
  const [darkMode, setDarkMode] = useState(false);
  const handleThemeChange = (checked) => {
    setDarkMode(checked);
    if (checked) {
      console.log("checked 切换到暗黑模式");
      document.body.classList.add("dark-theme");
    } else {
      console.log("unchecked 切换到明亮模式");
      document.body.classList.remove("dark-theme");
    }
  };
  return (
    <form>
      <div
        className="flex items-center"
        style={{ display: "flex", alignItems: "center" }}
      >
        <label
          className="text-black text-[15px] leading-none pr-[15px]"
          htmlFor="dark-mode"
        >
          Dark mode
        </label>
        {/* <ReactSwitch.Root
          className="w-[42px] h-[25px] bg-blackA9 rounded-full relative shadow-[0_2px_10px] shadow-blackA7 focus:shadow-[0_0_0_2px] focus:shadow-black data-[state=checked]:bg-black outline-none cursor-default"
          id="dark-mode"
          checked={darkMode}
          onCheckedChange={handleThemeChange}
        >
          <ReactSwitch.Thumb className="block w-[21px] h-[21px] bg-white rounded-full shadow-[0_2px_2px] shadow-blackA7 transition-transform duration-100 translate-x-0.5 will-change-transform data-[state=checked]:translate-x-[19px]" />
        </ReactSwitch.Root> */}
      </div>
    </form>
  );
};

export default ThemeButton;
