import MoonP from "@/components/icons/MoonP";
import Sun from "@/components/icons/Sun";
import { Button } from "@mui/material";
import { useTheme } from "next-themes";
import { useState } from "react";

function Theme() {
  const [mounted, setMounted] = useState(false);
  const { theme, setTheme } = useTheme();

  useState(() => setMounted(true), []);

  return (
    <Button
      className="
              !p-[8px] !border-[#EFEFEF] !rounded-[8px]
              !w-[32px] md:!w-[36px] lg:!w-[40px] dark:!border-[#343645]
              !h-[32px] md:!h-[36px] lg:!h-[40px]
              !min-w-[32px] md:!min-w-[36px] lg:!min-w-[40px]
              !min-h-[32px] md:!min-h-[36px] lg:!min-h-[40px]
          "
      //   onClick={handleThemeSwitch}
      onClick={() => setTheme(theme === "light" ? "dark" : "light")}
      variant="outlined"
    >
      <div className="block dark:hidden">
        <MoonP />
      </div>
      <div className="hidden dark:block">
        <Sun />
      </div>
    </Button>
  );
}

export default Theme;