"use client";

import { useTheme } from "next-themes";
import { DarkModeSwitch } from "react-toggle-dark-mode";
import { useState, useEffect } from "react";

const ThemeToggle = () => {
  const { resolvedTheme, setTheme } = useTheme();
  const [mounted, setMounted] = useState(false);

  // avoid SSR mismatch
  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) {
    // placeholder box so layout doesn’t jump
    return <div style={{ width: 20, height: 20 }} />;
  }

  return (
    <DarkModeSwitch
      checked={resolvedTheme === "dark"}
      onChange={(checked) => setTheme(checked ? "dark" : "light")}
      size={20}
    />
  );
};

export default ThemeToggle;