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;
  classNameSlide?: string;
}

function FirstSlide({ price, classNameSlide = "" }: 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}>
      <div className={classNameSlide}>
        <img
          className={styles.image}
          src="/v1/smartphone-1.webp"
          alt="Premium Intro"
        />
        <div className={styles["right-half"]}>
          <ul className={styles.list}>
            {firstSliderList.map((item, index) => (
              <li className={styles.item} key={index}>
                <span style={{ backgroundImage: `url(${item.icon})` }} />
                <p>{translate(item.title)}</p>
              </li>
            ))}
            <li className={styles.item}>
              <span>5</span>
              <p>minutes to read</p>
            </li>
          </ul>
          <div className={styles.bottom}>
            <div className={styles.links}>
              <img src="/v1/get_on_appstore.svg" alt="get on appstore" />
            </div>
            <p className={styles.price}>
              {_price.split(".")[0]}
              <sup>{_price.split(".")[1]}</sup>
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}

export default FirstSlide;
