import { Feature } from '@preply/ds-core-types';
import { Icon } from '@preply/ds-web-lib';
import React, { FC } from 'react';

import { importSvgFileName } from '../functions/import-svg-file-name';

import { IconCard, Li } from './IconItem.styles';

interface Props {
    icon: Feature;
    onIconClick: (icon: Feature) => void;
    isSelected?: boolean;
}

export const IconItem: FC<Props> = ({ icon, onIconClick, isSelected }) => {
    const isDeprecated = typeof icon.name === 'string' && !icon.name.startsWith('TokyoUI');

    return (
        <Li key={icon.name}>
            <IconCard
                onClick={() => onIconClick(icon)}
                isSelected={isSelected}
                isDeprecated={isDeprecated}
            >
                <Icon
                    svg={importSvgFileName(icon.name)}
                    accent={isDeprecated ? 'warning' : 'primary'}
                />
                <p>
                    {icon.name} {isDeprecated && '(deprecated)'}
                </p>
            </IconCard>
        </Li>
    );
};