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

import styles from './CollectionCard.scss';
import { Link } from 'react-router-dom';

import UserThumb from '@src/components/common/CircleThumb';
import URLInfo from '@src/constants/URLInfo';
import currency from 'currency.js';

const cx = classNames.bind(styles);

interface IOwnProps {
  thumbSrc: string;
  name: string;
  author: string;
  isOfficial: boolean;
  totalItem: number;
  totalVolume: number;
  className?: string;
  coverImage: string;
};

const CollectionCard: React.FC<IOwnProps> = ({
  thumbSrc,
  name,
  author,
  isOfficial,
  totalItem,
  totalVolume,
  className,
  coverImage
}) => {
  return (
    <div className={cx('collection_card', className)}>
      <Link to={URLInfo.getProfileCollectionUrl(name)} className={cx('collection_wrap')}>
        <div className={cx('collection_area')}>
          <div className={cx('cover')}>
            <img src={coverImage} alt="" />
          </div>
          <div className={cx('proflie')}>
            <UserThumb
              thumbSrc={thumbSrc}
              width={58}
              height={58}
              isOfficial={isOfficial}
              officialWidth={20}
              officialHeight={20}
              border={2}
            />
          </div>
          <div className={cx('title')}>{name}</div>
          <div className={cx('author')}>
            <span className={cx('text')}>by</span>
            <span className={cx('name')}>{author}</span>
          </div>
          <div className={cx('collection_info')}>
            <div className={cx('info_area')}>
              <strong className={cx('text')}>Items</strong>
              <strong className={cx('info')}>{totalItem}</strong>
            </div>
            <div className={cx('info_area')}>
              <strong className={cx('text')}>Total Volume</strong>
              <strong className={cx('info')}>{currency(totalVolume).format({
                precision: 2,
                symbol: '$'
              })}</strong>
            </div>
          </div>
        </div>
      </Link>
    </div>
  );
};

export default CollectionCard;
