"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 CardCategoriesMobile = ({ data }) => {
  const CTX = useContext(AppContext);
  const cart = CTX.state.cart;
  const hyphenatedName = hyphenateString(data.persianName);

  return (
    <div className="group border-t-[1px] border-gray-200  w-full hover:bg-white z-40 tr03 flex rtl pt-2 px-3">
      <Link href={`/products/${data.id}/${hyphenatedName}`}>
        <div className=" h-fit  ">
          {!!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] ">
              <Image
                src={logo}
                className="xs:!w-[70px] lg:!w-[70px] mx-auto  opacity-25 mt-5"
                alt="وسمه"
              />
            </div>
          )}
        </div>
      </Link>

      <div className="p-3 text-right w-full">
        {" "}
        <Link href={`/products/${data.id}/${hyphenatedName}`}>
          <p className="mb-0 xs:text-[12px] lg:text-[11px] xl:text-[15px]  max-h-[50px] tr03   ">
            {data?.persianName}
          </p>
        </Link>
        {data.stock <= 3 && data.stock !== 0 && (
          <p className="mb-0 text-[11px] text-red-600 font-medium">
            {data.stock} عدد موجود انبار
          </p>
        )}
        <div className=" rounded-full flex ltr  pt-2 mt-2  w-full">
          <AddToCart data={data} theme={1} />{" "}
          <div className="w-full  text-right rounded-lg">
            {data?.hasDiscount ? (
              <div className="flex justify-end">
                <div className="mb-0 font-bold text-sm absolute mt-[-7px] ml-[20px] text-red-600 flex rtl">
                  <del>
                    <PersianNumber
                      number={(data?.cost / 10).toLocaleString()}
                      style={"text-[13px] opacity-40 "}
                    />
                  </del>

                  <span className="bg-red-500 mb-0 px-1 text-[9px] text-white rounded-full mx-2 h-fit ">
                    <PersianNumber
                      number={data?.discountPercent}
                      style={"text-white !text-[10px] mr-1 "}
                    />
                    %
                  </span>
                </div>
                <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>
    </div>
  );
};

export default CardCategoriesMobile;