import { FC, useMemo } from 'react';
import { GetConfigurationValue } from '../../../../api';

export interface CatalogIconViewProps
{
    icon: number;
    className?: string;
}

export const CatalogIconView: FC<CatalogIconViewProps> = props =>
{
    const { icon = 0, className = '' } = props;

    const iconUrl = useMemo(() =>
    {
        return ((GetConfigurationValue<string>('catalog.asset.icon.url')).replace('%name%', icon.toString()));
    }, [ icon ]);

    return <img src={ iconUrl } alt="" className={ `w-5 h-5 object-contain image-rendering-pixelated ${ className }` } draggable={ false } />;
};