// import { useSelector } from "react-redux";
// import { selectors } from "@/store";
import clsx from "clsx";

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

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

import { CheckMark } from "..";

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