web/components/Cards/CardSurprise/page.jsx

import Image from "next/image";
import PersianNumber from "plugins/PersianNumber";
import p1 from "../../../public/images/product/1.png";
import AddToCart from "../Components/AddToCart/page";

const CardSurprise = () => {
  return (
    <div>
      <>
        <div
          className={` tr03 py-2  overflow-hidden xs:h-[200px] lg:h-[250px]  ${
            1 == 1 ? "bg-white  rounded-xl" : " opacity-70"
          }`}
          // key={index}
          // onClick={() => handleRoutineShiftPlanWithDay(index)}
        >
          <div className="absolute m-3 ">
            <div className="w-fit  rounded-full bg-red-900 overflow-hidden px-1 ">
              <p className="mb-0 text-[10px] text-white pt-[3px] ">
                <PersianNumber number={35} />
                <small className="text-[10px] ml-1">%</small>
              </p>
            </div>
          </div>{" "}
          <div className="w-full h-fit  ">
            <Image
              src={p1}
              className="xs:w-[110px] lg:w-[170px] mx-auto"
              alt=""
            />
          </div>
          <div className="p-3 text-right">
            <p className="mb-0 text-[15px] font-bold max-h-[50px] ">
              لوسیون بدن سلامتی | maya
            </p>
            <p className="mb-0 text-[12px] text-red-600 font-medium">
              {" "}
              3 عدد موجود انبار
            </p>
          </div>
        </div>
      </>
      <div className="bg-white rounded-full flex ltr p-3 mt-2 w-full">
        <AddToCart />

        <div className="w-full  text-right rounded-full">
          {2 == 2 ? (
            <>
              <p className="mb-0 font-bold text-sm absolute right-3 opacity-30 mt-[-5px] text-red-600">
                <del>
                  <PersianNumber number={150000} style={"text-[13px]"} />
                </del>
              </p>
              <div className="flex rtl mt-[8px]">
                {" "}
                <p className="mb-0 font-bold">
                  <PersianNumber number={150000} />
                </p>
                <small className="mr-1 mt-[3px]">تومان</small>
              </div>
            </>
          ) : (
            <div className="flex rtl mt-[3px]">
              {" "}
              <p className="mb-0 font-bold text-lg">
                <PersianNumber number={150000} />
              </p>
              <small className="mr-1 mt-[6px]">تومان</small>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default CardSurprise;