import React, { useEffect, useRef } from 'react';
import { getHashBucketHex } from './utils';
const Icon = ({ name, ...props }) => {
    const IconComponentRef = useRef(null);
    const [, forceUpdate] = React.useState({});
    useEffect(() => {
        IconComponentRef.current = null;
        let isMounted = true;
        const loadIcon = async () => {
            try {
                const { default: buckets } = await import('./map');
                const bucketKey = getHashBucketHex(name);
                const bucketLoader = buckets[bucketKey];
                if (!bucketLoader) {
                    console.warn(`Bucket not found for icon: ${name}`);
                    return;
                }
                const { default: map } = await bucketLoader();
                const iconLoader = map[name];
                if (!iconLoader) {
                    console.warn(`Icon not found in bucket: ${name}`);
                    return;
                }
                const iconModule = await iconLoader();
                if (isMounted && iconModule?.default) {
                    IconComponentRef.current = iconModule.default;
                    forceUpdate({});
                }
            }
            catch (error) {
                console.error(`Error loading icon: ${name}`, error);
            }
        };
        loadIcon();
        return () => {
            isMounted = false;
        };
    }, [name]);
    const IconComponent = IconComponentRef.current;
    if (!IconComponent)
        return null;
    return React.createElement(IconComponent, { ...props });
};
export default Icon;
