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

const cx = classNames.bind(styles);

export interface IArtistCardProps extends IArtist {
  className: string;
}

export default function ArtistCard({
  ID,
  Team,
  ThumbnailImage,
  className,
}: IArtistCardProps) {
  return (
    <div className={cx("artist_card", className)}>
      <Link to={URLInfo.getProfileUserUrl(Team || "")}>
        <div className={cx("card_wrap")}>
          <div className={cx("thumb_area")}>
            <Img
              src={ThumbnailImage}
              alt=""
              width="260"
              height="260"
              className={cx("thumb")}
            />
          </div>
          <div className={cx("info_area")}>{Team}</div>
        </div>
      </Link>
    </div>
  );
}
