import { useEffect, useState } from 'react';
import { Moon, Sun } from 'lucide-react';
import { applyThemeMode, getThemeMode, resolvedThemeMode } from '../utils/themeMode';

export default function ThemeModeToggle({ compact = false }) {
  const [theme, setTheme] = useState(getThemeMode);

  useEffect(() => {
    applyThemeMode(theme);
  }, [theme]);

  const currentResolvedTheme = resolvedThemeMode(theme);
  const nextTheme = currentResolvedTheme === 'dark' ? 'light' : 'dark';

  return (
    <button
      type="button"
      className={`theme-mode-toggle ${compact ? 'compact' : ''}`}
      onClick={() => setTheme(nextTheme)}
      title={currentResolvedTheme === 'dark' ? 'تم روشن' : 'تم تیره'}
      aria-label={currentResolvedTheme === 'dark' ? 'فعال‌سازی تم روشن' : 'فعال‌سازی تم تیره'}
    >
      {currentResolvedTheme === 'dark' ? <Sun size={compact ? 16 : 18} /> : <Moon size={compact ? 16 : 18} />}
      {!compact && <span>{currentResolvedTheme === 'dark' ? 'تم روشن' : 'تم تیره'}</span>}
    </button>
  );
}
