import Image from "next/image";
import PersianNumber from "plugins/PersianNumber";
import React from "react";
import p1 from "../../../public/images/product/1.png";
import p2 from "../../../public/images/product/2.png";

const CardCategoriesMobile = () => {
  return (
    <div className="group border-t-[1px] border-gray-200  w-full hover:bg-white z-40 tr03 flex rtl pt-2">
      <div className=" h-fit  ">
        <Image src={p2} className="xs:w-[130px] lg:w-[120px] " />
      </div>
      <div className="p-3 text-right">
        <p className="mb-0 xs:text-[12px] lg:text-[11px] xl:text-[15px]  max-h-[50px] tr03   ">
          لوسیون بدن سلامتی | mayasasdsdsda asdsad
        </p>
        <p className="mb-0  xs:text-[11px] lg:text-[10px] xl:text-[13px]  text-red-600 font-medium">
          {" "}
          3 عدد موجود انبار
        </p>

        <div className=" rounded-full flex ltr  pt-2 mt-2">
          <div className="flex">
            <div className="w-[35px] h-[35px] tr03 group-hover:bg-gray-100 overflow-hidden rounded-full mx-1  ">
              <div>
                <svg
                  width="20"
                  height="20"
                  viewBox="0 0 176 176"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                  className="mx-auto mt-[6px] opacity-40 tr03 group-hover:opacity-100"
                >
                  <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>

          <div className="w-full  text-right rounded-full">
            {2 == 2 ? (
              <div className="flex justify-end">
                <p className="mb-0  text-sm absolute opacity-40 mt-[-7px] ml-[20px] text-red-600">
                  <del>
                    <PersianNumber number={270000} style={"!text-[11px]"} />
                  </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>
            ) : (
              <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>
    </div>
  );
};

export default CardCategoriesMobile;