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

import { IconItem } from './IconItem';
import { Ul } from './IconList.styles';

interface Props {
    icons: Feature[];
    onIconClick: (icon: Feature) => void;
    selectedIcon: Feature | null;
}

export const IconList: FC<Props> = ({ icons, onIconClick, selectedIcon }) => {
    return (
        <Ul>
            {icons.map(icon => (
                <IconItem
                    key={icon.name}
                    icon={icon}
                    onIconClick={() => onIconClick(icon)}
                    isSelected={selectedIcon?.name === icon.name}
                />
            ))}
        </Ul>
    );
};