import React from 'react';
import { IconType, SmartIconType } from "@/types/iconType";
import { SmartIcon } from '@/components/utils/SmartIcon';

export function isSmartIconType(icon: unknown): icon is SmartIconType {
    return (
        typeof icon === 'object' &&
        icon !== null &&
        'Name' in icon &&
        typeof (icon as SmartIconType).Name === 'string'
    );
}

export function renderIcon(icon: IconType) {
    if (React.isValidElement(icon)) {
        return icon; // It's a React node
    } else if (typeof icon === 'function') {
        const IconComponent = icon; // It's a functional component

        // Create a ref to pass to the forwardRef component
        const ref = React.createRef<SVGSVGElement>(); // Adjust the type based on your icon component

        return <IconComponent ref={ref} size={20} className='stroke-foreground mb-0.5' />;
    } else if (isSmartIconType(icon)) {
        // Handle SmartIconType
        return (
            <SmartIcon icon={icon} />
        );
    }
    return null; // No valid icon provided
}