import React, { memo } from 'react';
import { SortableElement } from 'react-sortable-hoc';
import Thumb from 'components/Thumb';
import styles from '../SortItem.less';
import {getAssetsUrl} from 'utils/utils';

const ModuleItem = SortableElement(({ name, thumb }) => {
  return (
    <div className={styles.item}>
      <Thumb src={thumb ? getAssetsUrl(`${thumb}`) : undefined} />
      <span className={styles.name} title={name}>
        {name}
      </span>
    </div>
  );
});

export default memo(ModuleItem);
