'use client';

import { useEffect, useState } from 'react';

export function ThemeToggle() {
  const [isLight, setIsLight] = useState(false);

  useEffect(() => {
    const stored = window.localStorage.getItem('gamesji-theme');
    const light = stored === 'light';
    setIsLight(light);
    document.documentElement.classList.toggle('light', light);
  }, []);

  function toggle() {
    const next = !isLight;
    setIsLight(next);
    document.documentElement.classList.toggle('light', next);
    window.localStorage.setItem('gamesji-theme', next ? 'light' : 'dark');
  }

  return (
    <button
      onClick={toggle}
      aria-label={isLight ? 'Switch to dark mode' : 'Switch to light mode'}
      className="chip !py-1.5 hover:border-signal/60 hover:text-signal"
    >
      {isLight ? 'Dark' : 'Light'}
    </button>
  );
}
