import React from 'react';
import classNames from 'classnames/bind';
import Flicking from '@egjs/react-flicking';
import styles from './CollectionScrollList.scss';
import CollectionCard from '@src/components/common/CollectionCard';
import { ICollection } from 'metarare';

const cx = classNames.bind(styles);

interface IOwnProps {
  list?: ICollection[];
};

const CollectionScrollList: React.FC<IOwnProps> = ({
  list
}) => {
  return (
    <div className={cx('collection_scroll')}>
      <Flicking align="prev">
        {list?.map((item, index) => (
          <div className={cx('collection_panel')} key={`${item.id}_${index}`}>
            <CollectionCard
              thumbSrc={item.thumbnail_image}
              name={item.name}
              author={item.user_name}
              isOfficial={item.is_official}
              totalItem={item.items}
              totalVolume={item.total_volume}
              className={'scroll'}
              coverImage={item.cover_image}
            />
          </div>
        ))}
      </Flicking>
    </div>
  );
};

export default CollectionScrollList;
