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

import Flicking from '@egjs/react-flicking';
import styles from './NFTScrollList.scss';
import NFTCard from '@src/components/common/NFTCard';
import { INFT } from 'metarare';

const cx = classNames.bind(styles);

interface IOwnProps {
  list: INFT[];
};

const NFTScrollList: React.FC<IOwnProps> = ({
  list
}) => {
  return (
    <div className={cx('nft_scroll')}>
      <Flicking align="prev">
        {list.map((item, index) => (
          <div
            key={`${item.sale_id}_${index}`}
            className={cx('nft_panel')}
          >
            <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}
              fixedPrice={item.fixed_price}
              status={item.sale_status}
              lastestPrice={item.lastest_price}
              lastestCurrency={item.lastest_currency}
              className={'scroll'}
            />
          </div>
        ))}
      </Flicking>
    </div>
  );
};

export default NFTScrollList;
