import { firstSliderList } from "@/data/additionalPurchases";
import styles from "./styles.module.css";
import { useTranslations } from "@/hooks/translations";
import { addCurrency, ELocalesPlacement } from "@/locales";
import { useSelector } from "react-redux";
import { selectors } from "@/store";
import { useMemo } from "react";

interface IFirstSlideProps {
  price: number;
}

function FirstSlide({ price }: IFirstSlideProps) {
  const { translate } = useTranslations(ELocalesPlacement.V1);
  const currency = useSelector(selectors.selectCurrency);
  const _price = useMemo(() => {
    return addCurrency((price / 100).toFixed(2), currency);
  }, [currency, price]);

  return (
    <div className={styles.container}>
      <img
        className={styles.image}
        src="/premium_intro.webp"
        alt="Premium Intro"
      />
      <div className={styles["right-half"]}>
        {firstSliderList.map((item, index) => (
          <p className={styles.item} key={index}>
            <span style={{ backgroundImage: `url(${item.icon})` }} />
            {translate(item.title)}
          </p>
        ))}
        <p className={styles.item}>
          <span style={{ top: 0 }}>5</span>
          minutes to read
        </p>
        <div className={styles.bottom}>
          <div className={styles.links}>
            <img src="/get_on_appstore.webp" alt="get on appstore" />
            <img src="/get_on_google_play.webp" alt="get on google play" />
          </div>
          <p className={styles.price}>
            {_price.split(".")[0]}
            <sup>{_price.split(".")[1]}</sup>
          </p>
        </div>
      </div>
    </div>
  );
}

export default FirstSlide;
