import { Typography } from 'antd';
import classNames from 'classnames';
import { CategoryData, ResourceType, resourceConfig } from '../../config';
import styles from './index.less';

type CategoryItemProps = {
  resourceType: ResourceType;
  item: CategoryData;
  isSelected: boolean;
  onClick: (item: CategoryData) => void;
};

function CategoryItem({ resourceType, item, isSelected, onClick }: CategoryItemProps) {
  const config = resourceConfig[resourceType];
  return (
    <div
      className={classNames(styles['category-item'], {
        [styles['category-item--active']]: isSelected,
      })}
      onClick={() => onClick(item)}
    >
      <img
        className={styles['category-item__icon']}
        style={{ width: '22px' }}
        src={`/assets/images/${config.prefix}/${item.path}.png`}
        alt=""
        draggable={false}
      />
      <img
        className={styles['category-item__active-icon']}
        style={{ width: '22px' }}
        src={`/assets/images/${config.prefix}/${item.path}-hover.png`}
        alt=""
        draggable={false}
      />
      <Typography.Text ellipsis={{ tooltip: item.name }} style={{ marginTop: '4px' }}>
        {item.name}
      </Typography.Text>
    </div>
  );
}

export default CategoryItem;
