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

function PalmIsReady() {
  const { translate } = useTranslations(ELocalesPlacement.PalmistryV1);

  return (
    <div className={styles.container} style={{
      "--palmistry-prefix-girl-image": `url(${palmistryV1Prefix}/trial-payment/girl2.png)`
    } as React.CSSProperties}>
      <Title variant="h2" className={styles.title}>
        {translate("/trial-payment.palm_is_ready.title", {
          color: (
            <span>{translate("/trial-payment.palm_is_ready.title_color")}</span>
          ),
        })}
      </Title>
      <div>
        <img
          className={styles["girl-image"]}
          src={`${palmistryV1Prefix}/trial-payment/girl2.png`}
          alt="Smile girl"
        />
        <p className={styles.description}>
          {translate("/trial-payment.palm_is_ready.description")}
        </p>
        <p className={styles.text}>
          {translate("/trial-payment.palm_is_ready.text1", {
            color: (
              <span>
                {translate("/trial-payment.palm_is_ready.text1_color")}
              </span>
            ),
          })}
        </p>
        <p className={styles["choose-text"]}>
          {translate("/trial-payment.palm_is_ready.text2")}
        </p>
        <div className={styles["avatars-container"]}>
          <img
            src={`${palmistryV1Prefix}/trial-payment/avatar-1.png`}
            alt="Avatar"
          />
          <img
            src={`${palmistryV1Prefix}/trial-payment/avatar-2.png`}
            alt="Avatar"
          />
          <img
            src={`${palmistryV1Prefix}/trial-payment/avatar-3.png`}
            alt="Avatar"
          />
          <img
            src={`${palmistryV1Prefix}/trial-payment/avatar-4.png`}
            alt="Avatar"
          />
        </div>
      </div>
    </div>
  );
}

export default PalmIsReady;
