import { useEffect } from 'react';
import { usePublicSettings } from './usePublicSettings';
import { getFontPairing, applyFontPairing, getDefaultFontPairing } from '../config/fonts';

/**
 * Hook to load and apply club fonts from settings
 */
export const useFontLoader = () => {
  const { data: settings } = usePublicSettings();

  useEffect(() => {
    // Determine which font pairing to use
    const fontId = settings?.font_heading || settings?.font_body;
    
    let pairing;
    if (fontId) {
      // Try to find matching pairing by heading or body font name
      pairing = getFontPairing(fontId);
      
      // If not found by ID, try to find by font name
      if (!pairing) {
        const allPairings = require('../config/fonts').FONT_PAIRINGS;
        pairing = allPairings.find((p: any) => 
          p.heading === fontId || 
          p.body === fontId ||
          p.id === fontId
        );
      }
    }
    
    // Fallback to default
    if (!pairing) {
      pairing = getDefaultFontPairing();
    }
    
    // Apply the font pairing
    applyFontPairing(pairing);
    
  }, [settings?.font_heading, settings?.font_body]);
};
