import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// packages/ui/src/components/layout/components/header/AppBranding.tsx
/**
 * @fileoverview AppBranding - Combined logo + title with display modes
 * @description Unified branding component supporting COMPACT (logo only),
 * FULL (logo + title), and AUTO (container-responsive) display modes.
 *
 * @version 0.0.1
 * @since 0.0.1
 * @author AMBROISE PARK Consulting
 */
import { cn, DISPLAY } from '@donotdev/components';
import { useAppConfig } from '@donotdev/core';
import { Link } from '../../../../routing/Link';
import { AssetResolver } from '../../../../utils/assetResolver';
import { sanitizeSvg } from '../../../../utils/sanitizeSvg';
/**
 * AppBranding - Unified branding component
 *
 * Combines AppIcon + AppTitle with DISPLAY mode support.
 * Uses CSS container queries for AUTO mode - no JS breakpoint checks.
 *
 * @example
 * ```tsx
 * // Auto-responsive (default)
 * <AppBranding />
 *
 * // Logo only
 * <AppBranding display="compact" />
 *
 * // Always show logo + title
 * <AppBranding display="full" />
 * ```
 *
 * @version 0.0.1
 * @since 0.0.1
 * @author AMBROISE PARK Consulting
 */
export const AppBranding = ({ display = DISPLAY.AUTO, linkToHome = true, className, }) => {
    const appName = useAppConfig('name');
    const appShortName = useAppConfig('shortName');
    const displayTitle = appShortName || appName || 'App';
    const svgContent = AssetResolver.getLogoSvgContent();
    const logoPath = AssetResolver.resolveLogo();
    const showTitle = display === DISPLAY.FULL || display === DISPLAY.AUTO;
    const logo = svgContent ? (_jsx("div", { className: "app-branding-logo", role: "img", "aria-label": displayTitle, dangerouslySetInnerHTML: { __html: sanitizeSvg(svgContent) } })) : AssetResolver.assetExists(logoPath) ? (_jsx("img", { src: logoPath, alt: displayTitle, className: "app-branding-logo" })) : null;
    const title = showTitle && (_jsx("span", { className: "app-branding-title", "data-display": display, children: displayTitle }));
    const content = (_jsxs("div", { className: cn('app-branding', className), "data-display": display, children: [logo, title] }));
    if (linkToHome) {
        return (_jsx(Link, { path: "/", className: "app-branding-link", children: content }));
    }
    return content;
};
export default AppBranding;
