GymCard.tsx

import config from "@/utils/config";
import { GymReturned } from "@/utils/validationSchema/gym";
import React from "react";
import { Link } from "react-router-dom";

function GymCard({
  gym: { averageRating, cityName, monthlyPrice, name, pictureId, id },
}: {
  gym: GymReturned;
}) {
  return (
    <Link to={`./${id}`}>
      <article className="flex flex-col rounded-lg items-start justify-start bg-slate-600 text-white font-normal gap-2">
        <img
          src={`${config.GYM_MEDIA_URL}/${pictureId}.jpg`}
          className="w-full rounded-t-lg self-center"
        />
        <div className="flex flex-col items-start justify-start px-4 pb-4">
          <h3>{name}</h3>
          <p>{cityName}</p>
          <p>{`${averageRating} stars`}</p>
          <p>{`${monthlyPrice}/month`}</p>
        </div>
      </article>
    </Link>
  );
}

export default GymCard;