import React from "react";
import { Card } from "react-bootstrap";
import { Link } from "react-router-dom";
import * as GQL from "src/core/generated-graphql";
import { getCountryISO, NavUtils, TextUtils } from "src/utils";

interface IPerformerCardProps {
  performer: GQL.PerformerDataFragment;
  ageFromDate?: string;
}

export const PerformerCard: React.FC<IPerformerCardProps> = ({
  performer,
  ageFromDate,
}) => {
  const age = TextUtils.age(performer.birthdate, ageFromDate);
  const ageString = `${age} years old${ageFromDate ? " in this scene." : "."}`;

  const countryISO = getCountryISO(performer.country);

  function maybeRenderFavoriteBanner() {
    if (performer.favorite === false) {
      return;
    }
    return <div className="rating-banner rating-5">FAVORITE</div>;
  }

  return (
    <Card className="performer-card">
      <Link to={`/performers/${performer.id}`}>
        <img
          className="image-thumbnail card-image"
          alt={performer.name ?? ""}
          src={performer.image_path ?? ""}
        />
        {maybeRenderFavoriteBanner()}
      </Link>
      <div className="card-section">
        <h5 className="text-truncate">{performer.name}</h5>
        {age !== 0 ? <div className="text-muted">{ageString}</div> : ""}
        {countryISO && (
          <span className={`flag-icon flag-icon-${countryISO.toLowerCase()}`} />
        )}
        <div className="text-muted">
          Stars in {performer.scene_count}{" "}
          <Link to={NavUtils.makePerformerScenesUrl(performer)}>scenes</Link>.
        </div>
      </div>
    </Card>
  );
};