Users-Wrench/src/components/Cards/AvailableJobsCard.jsx

import React, { useCallback, useEffect, useMemo, useState } from "react";
import { Link, useNavigate,  } from "react-router-dom";
import { toast } from "react-toastify";
import localImgLoad from "../../lib/localImgLoad";
import Icons from "../Helpers/Icons";
import MarketPopUp from "../MarketPlace/PopUp/MarketPopUp";
import usersService from "../../services/UsersService";

export default function AvailableJobsCard({
  className,
  datas,
  hidden = false,
}) {
  //debugger;
  const [addFavorite, setValue] = useState(datas.whishlisted);
  const [marketPopUp, setMarketPopUp] = useState({ show: false, data: {} });
  const [manageInt, setManageInt] = useState(null)

  const navigate = useNavigate();
  const apiCall = useMemo(() => new usersService(), []);


  const favoriteHandler = () => {
    if (!addFavorite) {
      setValue(true);
      toast.success("Added to Favorite List");
    } else {
      setValue(false);
      toast.warn("Remove to Favorite List");
    }
  };

  const marketInterestData = useCallback(async() => {
    let { offer_code } = datas;
    let reqData = { offer_code };

    try {
      const manageInt = await apiCall.MarketInterest(reqData);
      const manageIntRes = await manageInt?.data;
      setManageInt(manageIntRes)
    } catch (error) {
      throw new Error(error)
    }

  }, [])

  useEffect(() => {
    if (!datas) {
      navigate("/market", { replace: true });
    }
    marketInterestData()
  }, [marketInterestData, datas])
  return (
    <>
      <div
        className={`card-style-two w-full h-[426px] p-[20px] bg-white dark:bg-dark-white   rounded-2xl section-shadow ${
          className || ""
        }`}
      >
        <div className="flex flex-col justify-between w-full h-full">
          <Link to="/shop-details" className="mb-2.5">
            <h1 className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
              {datas.title}
            </h1>
          </Link>

          <div className="card-two-info flex justify-between items-center">
            <div className="owned-by flex space-x-2 items-center">
              <div>
                <p className="text-thin-light-gray text-sm leading-3">Added</p>
                <p className="text-base   text-dark-gray dark:text-white">
                  {datas.offer_added}
                </p>
              </div>
            </div>
            <div className="w-[1px] bg-light-purple dark:bg-dark-light-purple  h-7"></div>
            <div className="created-by flex space-x-2 items-center flex-row-reverse">
              <div>
                <p className="text-thin-light-gray text-sm leading-3 text-right">
                  Expires
                </p>
                <p className="text-base text-dark-gray dark:text-white text-right">
                  {datas.expire}
                </p>
              </div>
            </div>
          </div>
          <div className="thumbnail-area w-full">
            <div
              className="w-full h-[236px] p-6  rounded-xl overflow-hidden"
              style={{
                background: `url(${localImgLoad(
                  `images/${datas.thumbnil}`
                )}) 0% 0% / cover no-repeat`,
              }}
            >
              <div className="flex justify-center">{datas.description}</div>
            </div>
          </div>
          <div className="details-area">
            <div className="product-two-options flex justify-between mb-5 relative">
              {/*      <div className="status">*/}
              {/*          {datas.isActive && (*/}
              {/*              <span className="text-xs px-3 py-1.5 tracking-wide rounded-full bg-gold text-white">*/}
              {/*  Active*/}
              {/*</span>*/}
              {/*          )}*/}
              {/*      </div>*/}

              {/*<div className=" review flex space-x-2">*/}
              {/*    <button*/}
              {/*        onClick={favoriteHandler}*/}
              {/*        type="button"*/}
              {/*        className={`w-7 h-7 bg-white    rounded-full flex justify-center items-center  ${*/}
              {/*            addFavorite ? "text-red-500" : "text-thin-light-gray"*/}
              {/*        }`}*/}
              {/*    >*/}
              {/*        <Icons name="star" />*/}
              {/*    </button>*/}
              {/*</div>*/}
            </div>

            <div className="flex justify-between">
              <div className="flex items-center space-x-2">
                <div>
                  <p className="font-bold text-xl tracking-wide line-clamp-1   text-dark-gray dark:text-white">
                    {datas.price * 0.01}
                    {datas.currency} | {datas.timeline_days} day(s)
                  </p>
                  <p className="text-sm text-lighter-gray">
                    ( {datas.offer_code})
                  </p>
                </div>
              </div>
              <div>
                <button
                  type="button"
                  className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
                  onClick={() => {
                    setMarketPopUp({show: true, data: datas})
                  }}
                >
                  View
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      {marketPopUp.show && (
        <MarketPopUp
          details={datas}
          onClose={() => {
            setMarketPopUp({ show: false, data: {} });
          }}
          situation={marketPopUp.show}
          marketInt={manageInt}
        />
      )}
    </>
  );
}