"use client";

import { Moon, Sun, Monitor } from "lucide-react";
import { useTheme } from "next-themes";
import { useState, useEffect } from "react";

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

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

  if (!mounted) return <div className="h-9 w-9" />;

  const themes = [
    { id: "light", icon: Sun, label: "Light" },
    { id: "dark", icon: Moon, label: "Dark" },
    { id: "system", icon: Monitor, label: "System" },
  ];

  const currentIdx = themes.findIndex((t) => t.id === theme);
  const next = themes[(currentIdx + 1) % themes.length];
  const Current = themes[currentIdx >= 0 ? currentIdx : 0]?.icon || Sun;

  return (
    <button
      onClick={() => setTheme(next.id)}
      className="neo-interactive bg-[var(--card)] p-2"
      title={`Switch to ${next.label} mode`}
    >
      <Current className="h-4 w-4 text-[var(--foreground)]" />
    </button>
  );
}