import * as React from 'react';
import { iconClassName, cx } from './shared';
import { useIconState } from './useIconState';
/**
 * Base createFluentIcon — SVG icon factory without Styles.
 *
 * Returns a React component that renders an SVG icon with:
 * - data-fui-icon attribute for CSS targeting
 * - a11y attributes (aria-hidden, aria-label, role)
 * - RTL flip via data-fui-icon-rtl attribute
 * - HCM forced-color-adjust via CSS attribute selector
 *
 * @access private
 * @alpha
 */
export const createFluentIcon = (displayName, width, pathsOrSvg, options) => {
    const viewBoxWidth = width === '1em' ? '20' : width;
    const Icon = React.forwardRef((props, ref) => {
        const iconState = useIconState(props, { flipInRtl: options === null || options === void 0 ? void 0 : options.flipInRtl });
        const state = {
            ...iconState,
            className: cx(iconClassName, iconState.className),
            ref,
            width,
            height: width,
            viewBox: `0 0 ${viewBoxWidth} ${viewBoxWidth}`,
            xmlns: 'http://www.w3.org/2000/svg',
        };
        if (typeof pathsOrSvg === 'string') {
            return React.createElement('svg', { ...state, dangerouslySetInnerHTML: { __html: pathsOrSvg } });
        }
        else {
            return React.createElement('svg', state, ...pathsOrSvg.map((d) => React.createElement('path', { d, fill: state.fill })));
        }
    });
    Icon.displayName = displayName;
    return Icon;
};