import { useTranslations } from "@/hooks/translations";
import WreathSVG from "../../images/SVG/Wreath";
import Stars from "../Stars";
import styles from "./styles.module.scss";
import { ELocalesPlacement } from "@/locales";

function ReviewsCount() {
  const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);

  return (
    <div className={styles.container}>
      <WreathSVG />
      <div className={styles.content}>
        <div className={styles.stars}>
          <Stars starVariant="1" />
          {translate("/review.stars")}
        </div>
        <div className={styles.reviews}>
          {translate("/review.reviews", {
            count: (
              <span className={styles.reviews_count}>
                {translate("/review.reviews_count")}
              </span>
            ),
          })}
        </div>
      </div>
      <WreathSVG className={styles.wreath_2} />
    </div>
  );
}

export default ReviewsCount;
