import clsx from "clsx";

import { Typography } from "@/components/ui";
import { getFormattedPrice } from "@/shared/utils/price";
import { Currency } from "@/types";

import { CheckMark } from "..";

import styles from "./Offer.module.scss";

interface OfferProps {
  title?: string | React.ReactNode;
  description?: string;
  oldPrice?: number | string;
  newPrice?: number | string;
  active?: boolean;
  image?: React.ReactNode;
  className?: string;
  classNameTitle?: string;
  onClick?: () => void;
}

function Offer({
  title,
  description,
  oldPrice,
  newPrice,
  active = false,
  onClick,
  image,
  className = "",
  classNameTitle = "",
}: OfferProps) {
  // const currency = useSelector(selectors.selectCurrency);
  const currency = Currency.USD;

  return (
    <div
      className={clsx(styles.container, active && styles.active, className)}
      onClick={onClick}
    >
      <CheckMark active={active} className={styles.checkMark} />

      {image}

      <Typography
        as="h3"
        weight="bold"
        className={clsx(styles.title, classNameTitle)}
      >
        {title}
      </Typography>
      <Typography as="p" className={styles.description}>
        {description}
      </Typography>
      <div className={styles.priceContainer}>
        <Typography weight="bold" className={styles.oldPrice}>
          {getFormattedPrice(Number(oldPrice), currency)}
        </Typography>
        <Typography weight="bold" className={styles.newPrice}>
          {getFormattedPrice(Number(newPrice), currency)}
        </Typography>
      </div>
    </div>
  );
}

export default Offer;
