web/components/Cards/CardCategories/page.jsx

"use client";

import AppContext from "@ctx/AppContext";
import Image from "next/image";
import Link from "next/link";
import PersianNumber from "plugins/PersianNumber";
import { useContext } from "react";
import logo from "../../../public/images/logo.png";
import AddToCart from "../Components/AddToCart/page";
import hyphenateString from "plugins/HyphenateString/page";

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

  return (
    <div className="group border border-gray-50  w-full hover:bg-white z-40 tr03">
      <>
        <div
          className={` tr03 py-2  overflow-hidden xs:h-[200px] lg:h-[230px]  ${
            1 == 1 ? "  rounded-xl" : " 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-[12px]"}
                  />
                  <small className="text-[10px] ml-1">%</small>
                </p>
              </div>
            </div>
          )}
          {data.hasDiscount && (
            <div className=" m-3 ">
              <div className="absolute  mt-[30px] ">
                <div className="w-fit  rounded-lg bg-secondary-600 overflow-hidden px-2 !py-0 h-fit ">
                  <p className="mb-0  text-white text-[10px]  ">اصالت کالا</p>
                </div>
              </div>{" "}
            </div>
          )}
          <Link href={`/products/${data.id}/${hyphenatedName}`}>
            <div className="w-full h-fit flex justify-center  ">
              {!!data.mainImage ? (
                <Image
                  src={`${process.env.NEXT_PUBLIC_STORAGE_URL}/${data.mainImage}`}
                  width={200}
                  height={200}
                  className="xs:!w-[110px] lg:!w-[130px] mx-auto"
                  alt={`${data.persianName} - ${data.englishName}`}
                />
              ) : (
                <div className="xs:!w-[85px] lg:!w-[85px] h-[90px] mt-10 ">
                  <Image
                    src={logo}
                    className="xs:!w-[70px] lg:!w-[70px]  mx-auto  opacity-25 mt-5"
                    alt="وسمه"
                  />
                </div>
              )}
            </div>
            <div className="p-3 text-right">
              <p className="mb-0 xs:text-[12px] lg:text-[12px] xl:text-[15px]    max-h-[50px] tr03   ">
                {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>
      </>

      <div className=" rounded-full flex ltr p-3 mt-2">
        <div className="flex w-full">
          <AddToCart data={data} theme={1} />
        </div>
        <div className="w-full  text-right rounded-full">
          {data?.hasDiscount ? (
            <div className="flex justify-end">
              <p className="mb-0 font-bold text-sm absolute opacity-40 mt-[-7px] ml-[20px] text-red-600">
                <del>
                  <PersianNumber
                    number={(data?.cost / 10).toLocaleString()}
                    style={"text-[13px]"}
                  />
                </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>
          ) : (
            <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>
  );
};

export default CardCategories;