'use client';
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
// packages/ui/src/internal/layout/components/FaviconHead.tsx
/**
 * @fileoverview Modern favicon system component
 * @description Comprehensive favicon setup following PWA and web.dev best practices
 *
 * IMPORTANT: This component is designed to be rendered inside <head> via:
 * - react-helmet-async
 * - Next.js Head component
 * - Nuxt.js Head component
 * - or similar head management solutions
 *
 * Microsoft Edge Tools false positives:
 * - apple-touch-icons: These ARE placed in <head> via React head management
 * - theme-color: Progressive enhancement - intentionally used for modern browsers
 *
 * @version 0.0.1
 * @since 0.0.1
 * @author AMBROISE PARK Consulting
 */
import { useEffect, useState } from 'react';
import { useFaviconConfig } from '@donotdev/core';
import { AssetResolver } from '../../../utils/assetResolver';
/**
 * Modern favicon system component
 *
 * Uses configuration from AppConfigProvider context.
 * No props needed - all config comes from useFaviconConfig().
 *
 * Features:
 * - SVG favicon with dark mode support
 * - Complete size set for all devices
 * - PWA manifest integration
 * - Microsoft tile support
 * - Apple touch icons
 * - Prevents default favicon requests
 *
 * @version 0.0.1
 * @since 0.0.1
 * @author AMBROISE PARK Consulting
 * @note This component must be rendered inside <head> via React head management
 */
const FaviconHead = () => {
    const faviconConfig = useFaviconConfig();
    // Return null if disabled
    if (!faviconConfig)
        return null;
    const { appName = 'DoNotDev App', themeColor = '#2563eb', backgroundColor = '#ffffff', includeManifestIcons = true, includeMSIcons = false, } = faviconConfig;
    const [faviconSet, setFaviconSet] = useState(null);
    useEffect(() => {
        const resolved = AssetResolver.resolveFaviconSet();
        setFaviconSet(resolved);
    }, []);
    if (!faviconSet) {
        return null;
    }
    return (_jsxs(_Fragment, { children: [faviconSet.svg && (_jsx("link", { rel: "icon", type: "image/svg+xml", href: faviconSet.svg })), faviconSet.ico && (_jsx("link", { rel: "icon", type: "image/x-icon", href: faviconSet.ico })), faviconSet.png16 && (_jsx("link", { rel: "icon", type: "image/png", sizes: "16x16", href: faviconSet.png16 })), faviconSet.png32 && (_jsx("link", { rel: "icon", type: "image/png", sizes: "32x32", href: faviconSet.png32 })), faviconSet.apple180 && (_jsxs(_Fragment, { children: [_jsx("link", { rel: "apple-touch-icon", sizes: "180x180", href: faviconSet.apple180 }), _jsx("meta", { name: "apple-mobile-web-app-status-bar-style", content: "default" }), _jsx("meta", { name: "apple-mobile-web-app-title", content: appName })] })), includeManifestIcons && (_jsxs(_Fragment, { children: [faviconSet.android192 && (_jsx("link", { rel: "icon", type: "image/png", sizes: "192x192", href: faviconSet.android192 })), faviconSet.android512 && (_jsx("link", { rel: "icon", type: "image/png", sizes: "512x512", href: faviconSet.android512 }))] })), includeMSIcons && faviconSet.png32 && (_jsxs(_Fragment, { children: [_jsx("meta", { name: "msapplication-TileImage", content: faviconSet.png32 }), _jsx("meta", { name: "msapplication-TileColor", content: themeColor }), _jsx("meta", { name: "msapplication-config", content: "/browserconfig.xml" })] })), _jsx("meta", { name: "theme-color", content: themeColor }), _jsx("meta", { name: "color-scheme", content: "light dark" }), _jsx("link", { rel: "shortcut icon", href: "data:," })] }));
};
export default FaviconHead;
