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

import Flicking from "@egjs/react-flicking";
import styles from "./NFTScrollList.scss";
import { ISaleRanking, INFT } from "metarare";
import SalesRankingCard from "../common/SaleRankingCard";

const cx = classNames.bind(styles);

interface IOwnProps {
  list: ISaleRanking[];
}

const SalesRankingScrollList: React.FC<IOwnProps> = ({ list }) => {
  return (
    <div className={cx("nft_scroll")}>
      <Flicking align="prev">
        {list.map((item, index) => (
          <div key={`${item.artist_id}_${index}`} className={cx("nft_panel")}>
            <SalesRankingCard {...item} className="scroll" />
          </div>
        ))}
      </Flicking>
    </div>
  );
};

export default SalesRankingScrollList;
