import classNames from "classnames/bind";
import { ISalesRanking } from "metarare";
import * as React from "react";
import Img from "./Img";
import styles from "./SalesRankingCard.scss";
import currency from "currency.js";

const cx = classNames.bind(styles);

export interface ISalesRankingCardProps extends ISalesRanking {
  className: string;
}

export default function SalesRankingCard({
  rank,
  name,
  thumbnail_image,
  className,
  total_revenue,
}: ISalesRankingCardProps) {
  const renderColor = () => {
    if (rank === 1) return "#ffd700";
    if (rank === 2) return "#c0c0c0";
    if (rank === 3) return "#cd7f32";
    return "#3d3d3d";
  };
  return (
    <div className={cx("sales_ranking_card", className)}>
      <div
        className={cx("ranking")}
        style={{
          background: renderColor(),
        }}
      >
        <span>{rank}</span>
      </div>
      <div className={cx("card_wrap")}>
        <div className={cx("thumb_area")}>
          <Img
            src={thumbnail_image}
            alt=""
            width="260"
            height="260"
            className={cx("thumb")}
          />
        </div>
        <div className={cx("info_area")}>
          <div className={cx("total")}>
            Total:{" "}
            {currency(total_revenue).format({
              symbol: "$",
              precision: 0,
            })}
          </div>
          <div className={cx("name")}>{name}</div>
        </div>
      </div>
    </div>
  );
}
