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

function WhatIncluded() {
  const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
  return (
    <div className={styles.container}>
      <Title variant="h3" className={styles.title}>
        {translate("/trial-payment.what_included.title")}
      </Title>
      <div className={styles.row}>
        <img src={`${compatibilityV2Prefix}/hand.svg`} alt="Hand" />
        <p className={styles.text}>
          {translate("/trial-payment.what_included.point1", {
            bold: (
              <b>{translate("/trial-payment.what_included.point1_bold")}</b>
            ),
          })}
        </p>
      </div>
      <div className={styles.row}>
        <img src={`${compatibilityV2Prefix}/1_1.svg`} alt="1 : 1" />
        <p className={styles.text}>
          {translate("/trial-payment.what_included.point2", {
            bold: (
              <b>{translate("/trial-payment.what_included.point2_bold")}</b>
            ),
          })}
        </p>
      </div>
      <div className={styles.row}>
        <img src={`${compatibilityV2Prefix}/daily.svg`} alt="Daily" />
        <p className={styles.text}>
          {translate("/trial-payment.what_included.point3", {
            bold: (
              <b>{translate("/trial-payment.what_included.point3_bold")}</b>
            ),
          })}
        </p>
      </div>
      <div className={styles.row}>
        <img src={`${compatibilityV2Prefix}/cosmic.svg`} alt="Cosmic" />
        <p className={styles.text}>
          <b>{translate("/trial-payment.what_included.point4")}</b>
        </p>
      </div>
      <div className={styles.row}>
        <img src={`${compatibilityV2Prefix}/calendar.svg`} alt="Calendar" />
        <p className={styles.text}>
          <b>{translate("/trial-payment.what_included.point5")}</b>
        </p>
      </div>
    </div>
  );
}

export default WhatIncluded;
