import type { FC } from 'react';
import { createElement } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';

// Creates a wrapper component that passes all props (including data-icon)
// to FontAwesomeIcon. This is needed because the Button component uses
// data-icon CSS selectors for sizing.
export const faIcon = (icon: IconDefinition): FC<Record<string, any>> => {
    const IconComponent: FC<Record<string, any>> = (props) =>
        createElement(FontAwesomeIcon, { icon, ...props });
    IconComponent.displayName = `FAIcon(${icon.iconName})`;
    return IconComponent;
};
