import { addCurrency } from "@/locales";
import styles from "./styles.module.scss";
import { getFormattedPrice } from "@/utils/price.utils";
import { useSelector } from "react-redux";
import { selectors } from "@/store";
import Title from "@/components/Title";
import CheckMark from "../CheckMark";

interface IOfferProps {
    title?: string;
    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 = ""
}: IOfferProps) {
    const currency = useSelector(selectors.selectCurrency);

    return (
        <div className={`${styles.container} ${active ? styles.active : ""} ${className}`} onClick={onClick}>
            <CheckMark active={active} className={styles.checkMark} />

            {image}

            <Title variant="h3" className={`${styles.title} ${classNameTitle}`}>
                {title}
            </Title>
            <p className={styles.description}>
                {description}
            </p>
            <div className={styles.priceContainer}>
                <span className={styles.oldPrice}>
                    {addCurrency(getFormattedPrice(Number(oldPrice)), currency)}
                </span>
                <span className={styles.newPrice}>
                    {addCurrency(getFormattedPrice(Number(newPrice)), currency)}
                </span>
            </div>
        </div>
    )
}

export default Offer