bonsai-web/components/Cards/CardSurprise/page.jsx

"use client";
import { useContext } from "react";
import logo from "../../../public/images/logo.png";

import AppContext from "@ctx/AppContext";
import Image from "next/image";
import Link from "next/link";
import PersianNumber from "plugins/PersianNumber";
import AddToCart from "../Components/AddToCart/page";
import hyphenateString from "plugins/HyphenateString/page";

const CardSurprise = ({ data, priority }) => {
  const CTX = useContext(AppContext);
  const cart = CTX.state.cart;
  const hyphenatedName = hyphenateString(data.persianName);

  return (
    <>
      {" "}
      <>
        <div
          className={` tr03 py-2  overflow-hidden xs:h-[340px] lg:h-[440px] border border-gray-100 relative   ${
            1 == 1 ? "bg-white  rounded-xl rounded-tl-[40px]" : " opacity-70"
          }`}
          // key={index}
          // onClick={() => handleRoutineShiftPlanWithDay(index)}
        >
          {data.hasDiscount && (
            <div className="absolute m-3 ">
              <div className="w-fit  rounded-lg bg-red-600 overflow-hidden px-1 ">
                <p className="mb-0 text-[10px] text-white  pt-[3px] ">
                  <PersianNumber
                    number={data.discountPercent}
                    style={"!text-[10px]"}
                  />
                  <small className="text-[10px] ml-1">%</small>
                </p>
              </div>
            </div>
          )}

          <>
            <Link href={`/products/${data.id}/${hyphenatedName}`}>
              <div className="w-full h-fit flex justify-center mt-5  ">
                {!!data.mainImage ? (
                  <Image
                    src={`${process.env.NEXT_PUBLIC_STORAGE_URL}/${data.mainImage}`}
                    width={500}
                    height={500}
                    className="xs:!w-[110px] lg:!w-[200px] mx-auto !object-cover"
                    alt={`${data.persianName} - ${data.englishName}`}
                    priority={!!priority}
                  />
                ) : (
                  <div className="xs:!w-[85px] lg:!w-[85px] h-[90px] mt-10 ">
                    <Image
                      src={logo}
                      className="xs:!w-[70px] lg:!w-[70px]  mx-auto !object-cover opacity-25 mt-5"
                      alt="وسمه"
                    />
                  </div>
                )}
              </div>
              <div className="p-3 text-right">
                <p className="mb-0 text-[14px]  max-h-[44px] overflow-hidden ">
                  {data.persianName}
                </p>

                {data.stock <= 3 && data.stock !== 0 && (
                  <p className="mb-0 text-[11px] text-red-600 font-medium">
                    {data.stock} عدد موجود انبار
                  </p>
                )}
              </div>
            </Link>
          </>

          <div className="px-2 mt-2 ">
            <div className="bg-gray-300 p-2 rounded-full w-full"></div>

            <div className="absolute w-full  mt-[-16px]">
              <div className="bg-green-700 p-2 rounded-full w-3/12"></div>
            </div>

            <p className="mb-0 text-[11px] mt-1 text-red-500 mr-2">
              <PersianNumber number={21} style={"!text-[11px] ml-1"} />
              عدد در انبار وجود دارد
            </p>
          </div>

          <div className="absolute w-full  bottom-0 ">
            <div className="bg-gray-100 rounded-t-3xl flex ltr  mt-2 border border-gray-100  p-2 ">
              <div className="flex w-full">
                <AddToCart data={data} theme={1} />
              </div>

              <div className="w-full  text-right rounded-full pr-2">
                {data?.hasDiscount ? (
                  <>
                    <p className="mb-0 font-bold text-sm absolute right-3 opacity-30 mt-[-5px] text-red-600">
                      <del>
                        <PersianNumber
                          number={(data?.cost / 10).toLocaleString()}
                          style="!text-[11px]"
                        />
                      </del>
                    </p>
                    <div className="flex rtl mt-[8px]">
                      {" "}
                      <p className="mb-0 font-bold">
                        <PersianNumber
                          number={(
                            data?.costWithDiscount / 10
                          ).toLocaleString()}
                        />
                      </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={(data?.cost / 10).toLocaleString()}
                      />
                    </p>
                    <small className="mr-1 mt-[6px]">تومان</small>
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>
      </>
    </>
  );
};

export default CardSurprise;