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

function AppStoreReviews() {
  const { translate } = useTranslations(ELocalesPlacement.Chats);
  return (
    <div className={styles["app-wrapper"]}>
      <div className={styles["app-review"]}>
        <img
          alt="wing"
          width="50"
          height="107"
          className={styles.wing}
          src={images("wing.webp")}
        />
        <div className={styles["app-info"]}>
          <p className={styles["app-title"]}>{translate("app_store")}</p>
          <p className={styles["app-text"]}>
            {translate("app_store_reviews", {
              count: 215,
            })}
          </p>
        </div>
        <img
          alt="wing"
          width="50"
          height="107"
          className={styles["wing-right"]}
          src={images("wing.webp")}
        />
      </div>

      <div className={styles["app-rating"]}>
        <Stars /> |{" "}
        {translate("app_store_rating", {
          rating: 4.8,
        })}
      </div>
    </div>
  );
}

export default AppStoreReviews;
