"use client";
import React, { useContext } from "react";
import { SwiperSlide } from "swiper/react";
import p1 from "../../../public/images/product/1.png";
import p2 from "../../../public/images/product/2.png";
import p3 from "../../../public/images/product/3.png";
import p4 from "../../../public/images/product/4.png";
import Image from "next/image";
import PersianNumber from "plugins/PersianNumber";
import AppContext from "@ctx/AppContext";

const CardNormal = (props) => {
  const CTX = useContext(AppContext);
  const cart = CTX.state.cart;
  return (
    <>
      {" "}
      <>
        <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" />
          </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-1 mt-2">
        <div className="flex">
          {/*{cart.find(e=>id)}*/}
          {2 == 1 ? (
            <div className="w-[35px] h-[35px] bg-gray-200 overflow-hidden rounded-full  ">
              <div onClick={() => CTX.AddItemToCart(123, 1)}>
                <svg
                  width="16"
                  height="16"
                  viewBox="0 0 176 176"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                  className="mx-auto mt-[8px]"
                >
                  <path
                    d="M163 100.475H100.5V162.975C100.5 166.29 99.183 169.47 96.8388 171.814C94.4946 174.158 91.3152 175.475 88 175.475C84.6848 175.475 81.5054 174.158 79.1612 171.814C76.817 169.47 75.5 166.29 75.5 162.975V100.475H13C9.68479 100.475 6.50537 99.1581 4.16117 96.8139C1.81696 94.4697 0.5 91.2903 0.5 87.9751C0.5 84.6599 1.81696 81.4805 4.16117 79.1363C6.50537 76.7921 9.68479 75.4751 13 75.4751H75.5V12.9751C75.5 9.65989 76.817 6.48046 79.1612 4.13626C81.5054 1.79205 84.6848 0.475098 88 0.475098C91.3152 0.475098 94.4946 1.79205 96.8388 4.13626C99.183 6.48046 100.5 9.65989 100.5 12.9751V75.4751H163C166.315 75.4751 169.495 76.7921 171.839 79.1363C174.183 81.4805 175.5 84.6599 175.5 87.9751C175.5 91.2903 174.183 94.4697 171.839 96.8139C169.495 99.1581 166.315 100.475 163 100.475Z"
                    fill="black"
                  />
                </svg>
              </div>
            </div>
          ) : (
            <div className="flex rtl">
              <div className="w-[35px] h-[35px] bg-gray-200 overflow-hidden rounded-full text-center ">
                <p className="mb-0  text-[25px] mt-[-2px]">+</p>
              </div>
              <p className="mb-0 mx-2 mt-1 font-bold">
                <PersianNumber number={1} />
              </p>
              <div className="w-[35px] h-[35px] bg-red-200 overflow-hidden rounded-full text-center ">
                <p className="mb-0  text-[30px] mt-[-5px]">-</p>
              </div>
            </div>
          )}
        </div>

        <div className="w-full  text-right rounded-full pr-2">
          {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-[9px]" />
                </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>
    </>
  );
};

export default CardNormal;