'use client';

import { useEffect, useState } from 'react';

interface ThemeSettings {
  logo?: string;
  favicon?: string;
  plainHeader?: boolean;
  fontFamily?: string;
  backupFontFamily?: string;
  fontWeight?: string;
  fontSubsets?: string;
}

/**
 * Client-side hook to fetch theme settings
 * Note: This makes a client-side API call. For server components, use getThemeSettings() instead.
 */
export function useThemeSettings() {
  const [settings, setSettings] = useState<ThemeSettings>({});
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const fetchSettings = async () => {
      try {
        const response = await fetch('/api/theme-settings');
        if (response.ok) {
          const data = await response.json();
          setSettings(data);
        }
      } catch (error) {
        console.error('Failed to fetch theme settings:', error);
      } finally {
        setIsLoading(false);
      }
    };

    fetchSettings();
  }, []);

  return { settings, isLoading };
}