import React from 'react';
import classNames from 'classnames/bind';

import styles from './CollectionCardList.scss';
import ButtonMore from '@src/components/common/ButtonMore';
import CollectionCard from './CollectionCard';
import { ICollection } from 'metarare';

const cx = classNames.bind(styles);

interface IOwnProps {
  list: ICollection[];
  onClickMore: () => void;
  showMore: boolean;
};

const CollectionCardList: React.FC<IOwnProps> = ({
  list,
  onClickMore,
  showMore
}) => {
  return (
    <div className={cx('nft_list_wrap')}>
      <ul className={cx('nft_list')}>
        {list.map(item => (
          <li className={cx('item')} key={item.id}>
            <CollectionCard
              thumbSrc={item.thumbnail_image}
              name={item.name}
              author={item.user_name}
              isOfficial={item.is_official}
              totalItem={item.items}
              totalVolume={item.total_volume}
              coverImage={item.cover_image}
            />
          </li>
        ))}
      </ul>
      {showMore && (
        <ButtonMore onClickMore={onClickMore} />
      )}
    </div>
  );
};

export default CollectionCardList;
