"use client";

import { useEffect, useState } from "react";
import { useAppSettings } from "@/hooks/use-settings";

interface SettingsProviderProps {
  children: React.ReactNode;
}

/**
 * Provider que aplica las configuraciones de la app al DOM
 * - Modo compacto (clase en body)
 * - Deshabilitar animaciones (clase en body)
 */
export function SettingsProvider({ children }: SettingsProviderProps) {
  const { settings, isLoaded } = useAppSettings();
  const [mounted, setMounted] = useState(false);

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

  // Aplicar clases al body según configuraciones
  useEffect(() => {
    if (!mounted || !isLoaded) return;

    const body = document.body;

    // Modo compacto
    if (settings.compactMode) {
      body.classList.add("compact-mode");
    } else {
      body.classList.remove("compact-mode");
    }

    // Animaciones
    if (!settings.showAnimations) {
      body.classList.add("no-animations");
    } else {
      body.classList.remove("no-animations");
    }

    // Cleanup
    return () => {
      body.classList.remove("compact-mode", "no-animations");
    };
  }, [mounted, isLoaded, settings.compactMode, settings.showAnimations]);

  return <>{children}</>;
}