import { Link } from "react-router-dom";
import { useTranslation } from "react-i18next";

export default function SalonCard({ salon }) {
  const { t } = useTranslation();
  return (
    <article className="card" data-testid="salon-card">
      <div className="card-header">
        <h3>{salon.name}</h3>
        <span className="rating">{salon.rating_avg} / 5</span>
      </div>
      <p>{salon.description || t("card.noDescription")}</p>
      <div className="meta">
        <span>{salon.city}</span>
        <span>{salon.phone_number || t("card.phoneUnavailable")}</span>
      </div>
      <Link to={`/salon/${salon.id}`} className="card-link">
        {t("card.viewDetails")}
      </Link>
    </article>
  );
}