---
import { siteConfig } from "@/config";


// Get all fonts from config
const fontConfig = siteConfig.font || {};
const fonts = Object.entries(fontConfig).map(([id, font]) => (
    {id, ...font}
));

// Generate font-family strings
const selectedFontFamilies = fonts
  .filter(font => font && font.family)
  .map(font => `"${font.family}"`);

const fallbacks = "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif";
const customFontFamily = selectedFontFamilies.join(", ");
const finalFontFamily = customFontFamily ? `${customFontFamily}, ${fallbacks}` : fallbacks;
---

<!-- Font Loading -->
{
  fonts.map((font) => {
    const isCss = font.src.endsWith('.css') || font.src.includes('fonts.googleapis.com') || font.src.includes('unpkg.com');
    if (isCss) {
        // If it's a Google Font, we can append &display=swap if it's not already there
        let fontSrc = font.src;
        if (fontSrc.includes('fonts.googleapis.com') && !fontSrc.includes('display=')) {
            fontSrc += (fontSrc.includes('?') ? '&' : '?') + 'display=swap';
        }
        return (
            <>
                <link rel="preload" href={fontSrc} as="style" />
                <link rel="stylesheet" href={fontSrc} />
            </>
        );
    } else if (font.src) {
        // Assume it's a font file (ttf, woff, woff2, etc.)
        return (
            <>
                <link rel="preload" href={font.src} as="font" crossorigin="anonymous" />
                <style set:html={`
                    @font-face {
                        font-family: "${font.family}";
                        src: url("${font.src}");
                        font-display: swap;
                    }
                `} />
            </>
        );
    }
    return null;
  })
}

<!-- Apply Global Font Family -->
<style is:global set:html={`
    :root {
        --font-family-fallback: ${fallbacks};
        --global-font-family: ${finalFontFamily};
    }

    /* Apply to body as default */
    body {
        font-family: var(--global-font-family);
    }

    /* Generate specific classes for each font*/
    ${fonts.map(font => `
        .font-${font.id},
        .font-${font.id} * {
            font-family: "${font.family}", var(--font-family-fallback) !important;
        }
    `).join('\n')}
`} />