'use client';

import { useState, useEffect } from 'react';
import Image from 'next/image';
import Link from 'next/link';
import moonPic from '@/public/moon.svg';
import sunPic from '@/public/sun.svg';

export function ThemeSwitcher() {
  const [isLightMode, setIsLightMode] = useState(false);

  // Initialize theme from localStorage or system preference
  useEffect(() => {
    const savedTheme = localStorage.getItem('theme');
    const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
    
    if (savedTheme === 'light' || (!savedTheme && !systemPrefersDark)) {
      setIsLightMode(true);
      document.documentElement.classList.add('light');
    }
  }, []);

  // Toggle theme and save preference
  const toggleTheme = () => {
    const newLightMode = !isLightMode;
    setIsLightMode(newLightMode);
    
    if (newLightMode) {
      document.documentElement.classList.add('light');
      localStorage.setItem('theme', 'light');
    } else {
      document.documentElement.classList.remove('light');
      localStorage.setItem('theme', 'dark');
    }
  };

  return (
    <li className="theme-switcher inline">
      <Link href="#" onClick={toggleTheme} className="block p-2">
        <Image
          src={isLightMode ? moonPic : sunPic}
          alt={isLightMode ? 'Switch to dark mode' : 'Switch to light mode'}
          width={32}
          height={32}
          className={`transition-all duration-300 ${isLightMode ? 'filter brightness-0 invert' : 'filter-none'}`}
        />
      </Link>
    </li>
  );
}