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

import Flicking from '@egjs/react-flicking';
import styles from './NFTScrollList.scss';
import { IArtist, INFT } from 'metarare';
import ArtistCard from '../common/ArtistCard';

const cx = classNames.bind(styles);

interface IOwnProps {
  list: IArtist[];
};

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

export default ArtistScrollList;
