import React from 'react';
import classNames from 'classnames/bind';
import styles from './NFTCardList.scss';
import NFTCard from '@src/components/common/NFTCard';
import ButtonMore from '@src/components/common/ButtonMore';
import { INFT } from 'metarare';
import ContentLoading from './ContentLoading';

const cx = classNames.bind(styles);

interface IOwnProps {
  list: INFT[];
  onClickMore: () => void;
  showMore: boolean;
  handleDisLike?: (id: number) => void;
  isLoaded?: boolean;
};

const NFTCardList: React.FC<IOwnProps> = ({
  list,
  onClickMore,
  showMore,
  handleDisLike,
  isLoaded = true
}) => {
  return (
    <div className={cx('nft_list_wrap')}>
      <ul className={cx('nft_list')}>
        {list?.map((item, index) => (
          <li className={cx('item')} key={`${item.token_id}_${index}`}>
            <NFTCard
              saleId={item.sale_id}
              content_title={item.content_title}
              collectionThumb={item.collection_thumbnail_image}
              collectionName={item.collection_name}
              authorThumb={item.owner_thumbnail_image}
              authorName={item.owner_name}
              thumbURL={item.content_url}
              price={item.current_price}
              currency={item.current_currency}
              saleType={item.sale_type}
              totalCount={item.total_count}
              tokenId={item.token_id}
              likeCount={item.likes}
              isLike={item.is_like}
              endTime={item.end_at}
              startPrice={item.start_price}
              userId={item.user_id}
              itemIndex={item.item_index}
              handleDisLike={handleDisLike}
              fixedPrice={item.fixed_price}
              status={item.sale_status}
              lastestPrice={item.lastest_price}
              lastestCurrency={item.lastest_currency}
            />
          </li>
        ))}
      </ul>
      {!isLoaded && (
        <ContentLoading />
      )}
      {isLoaded && showMore && (
        <ButtonMore onClickMore={onClickMore} />
      )}
    </div>
  );
};

export default NFTCardList;