import classNames from "classnames/bind";
import { ISaleRanking } from "metarare";
import * as React from "react";
import Img from "./Img";
import styles from "./SalesRankingCard.scss";
import currency from "currency.js";
import { Link } from "react-router-dom";
import URLInfo from "@src/constants/URLInfo";

const cx = classNames.bind(styles);

export interface ISalesRankingCardProps extends ISaleRanking {
  className: string;
}

export default function SalesRankingCard({
  name,
  thumbnail_image,
  className,
  amounts_sale,
  rank = 0
}: 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>{" "}
      <Link to={URLInfo.getProfileUserUrl(name || "")}>
        <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(amounts_sale).format({
                symbol: "$",
                precision: 0,
              })}
            </div>
            <div className={cx("name")}>{name}</div>
          </div>
        </div>
      </Link>
    </div>
  );
}
