import type { ReactNode } from "react";

import type { CatalogEntity } from "../../types";
import { categoryLabels, difficultyLabels, equipmentLabels, measurementLabels } from "./meta";

export function CatalogCard({ entity, action }: { entity: CatalogEntity; action?: ReactNode }) {
  return (
    <article className="card catalog-card">
      {entity.image_s3_url ? <img src={entity.image_s3_url} alt="" /> : <div className="image-placeholder">TW</div>}
      <div>
        <div className="card-pills">
          <span className={entity.is_builtin ? "pill" : "pill user"}>{entity.is_builtin ? "стандартное" : "мое"}</span>
          <span className="pill kind">{entity.kind === "exercise" ? "упражнение" : "тренажер"}</span>
        </div>
        <h3>{entity.title}</h3>
        <small>{categoryLabels[entity.category]} · {equipmentLabels[entity.equipment]}</small>
        <p>{entity.description || "Без описания"}</p>
        <div className="card-pills muted-pills">
          <span>{measurementLabels[entity.measurement_type]}</span>
          <span>{difficultyLabels[entity.difficulty]}</span>
        </div>
        {action}
      </div>
    </article>
  );
}
