import React from 'react';
import { AppIcon, CountryFlag, GlyphIcon, StoreIcon } from '@theorchard/suite-icons';
import type { SuiteBadgeIconCategory } from './types';
import type { GlyphName16PX, StoreIconName } from '@theorchard/suite-icons';

export const renderBadgeIcon = (
    iconCategory: SuiteBadgeIconCategory,
    iconName: string
): JSX.Element => {
    if (iconCategory === 'flag') return <CountryFlag countryCode={iconName} />;

    if (iconCategory === 'glyph') return <GlyphIcon name={iconName as GlyphName16PX} size={16} />;

    if (iconCategory === 'store') return <StoreIcon name={iconName as StoreIconName} size={'16'} />;

    if (iconCategory === 'app') return <AppIcon app={iconName} size={16} />;

    return <></>;
};