"use client";

import { useTheme } from "next-themes";
import { useEffect, useState } from "react";

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

  useEffect(() => {
    setTimeout(() => setMounted(true), 10);
  }, []);

  if (!mounted) {
    return null;
  }

  return (
    <div className="flex gap-4 justify-end">
      <button
        onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
        className="px-4 py-2 rounded-lg bg-gray-200 dark:bg-gray-800 text-gray-900 dark:text-gray-100"
      >
        {theme === "dark" ? "🌙" : "☀️"}
      </button>
      <button
        onClick={() => setTheme("system")}
        className="px-4 py-2 rounded-lg bg-gray-200 dark:bg-gray-800 text-gray-900 dark:text-gray-100"
      >
        🖥️
      </button>
    </div>
  );
}