import { compatibilityV2Prefix } from "@/routes";
import styles from "./styles.module.scss";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";

function AppNumberOne() {
  const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
  return (
    <div className={styles.container}>
      <img src={`${compatibilityV2Prefix}/reviews.png`} alt="Reviews" />
      <p className={styles.text}>
        {translate("app_number_one.text", {
          color: <span>{translate("app_number_one.color")}</span>,
        })}
      </p>
    </div>
  );
}

export default AppNumberOne;
