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

import { useCallback, useEffect, useMemo, useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import MarketPopUp from "../MarketPlace/PopUp/MarketPopUp";
import usersService from "../../services/UsersService";
import { PriceFormatter } from "../Helpers/PriceFormatter";
import dataImage2 from "../../assets/images/data-table-user-2.png";

export default function AvailableJobsCard({
  className,
  datas,
  hidden = false,
  contentDisplay
}) {
  //debugger;
  const [marketPopUp, setMarketPopUp] = useState({ show: false, data: {} });
  const [manageInt, setManageInt] = useState(null);
  const [imageUrl, setImageUrl] = useState("");

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

  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);
    }
  }, [apiCall, datas]);

  let thePrice = PriceFormatter(  
    datas?.price * 0.01,
    datas?.currency_code,
    datas?.currency
  );

  useEffect(() => {
    if (!datas) {
      navigate("/market", { replace: true });
    }
    marketInterestData();
  }, []);

  useEffect(() => {
    const imagePath = require(`../../assets/images/${datas.thumbnil}`); // Replace with your directory path for local images
    setImageUrl(imagePath);
  }, []);
  return (
    <>
    {contentDisplay == 'grid' ?
      <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 bg-center bg-cover bg-no-repeat"
              style={{
                backgroundImage: `url('${imageUrl}')`,
              }}
            >
              <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">
                    {/* {thePrice} | {datas.timeline_days} day(s) */}
                    {thePrice}
                  </p>
                  <p className="text-sm text-lighter-gray">
                    ( {datas.offer_code}) |
                    <span className="italic ml-1">
                      {datas.timeline_days} day(s)
                    </span>
                  </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>
    :
      <div className="card-style-two w-full p-8 my-2 flex items-center gap-4 bg-white dark:bg-dark-white rounded-2xl section-shadow">
        <div className="flex gap-5 items-center w-full">
          <div className="w-full h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1] min-w-[60px] max-w-[60px]">
            <img src={dataImage2} alt="data" className="w-full h-full" />
          </div>
          <div className="flex flex-col flex-[0.9]">
            <Link to="/shop-details" className="">
              <h1 className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
                {datas?.title}
              </h1>
            </Link>

            <div className="my-2">
              <p className="text-dark-gray dark:text-white">{datas?.description}</p>
            </div>

            {/* <div className="card-two-info flex gap-2 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="block sm:flex flex-wrap gap-4">
              <p className="text-sm text-thin-light-gray">
                Price: <span className="text-purple">{thePrice}</span>
              </p>
              <p className="text-sm text-thin-light-gray">
                Duration:{" "}
                <span className="text-purple italic">
                  {" "}
                  {datas?.timeline_days} day(s)
                </span>
              </p>
              <p className="text-sm text-thin-light-gray">
                Code:{" "}
                <span className="text-purple">
                  {" "}
                  {datas?.offer_code}
                </span>
              </p>
            </div>
          </div>
        </div>
        <div className="">
          <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>
    }
      {marketPopUp.show && (
        <MarketPopUp
          details={datas}
          onClose={() => {
            setMarketPopUp({ show: false, data: {} });
          }}
          situation={marketPopUp.show}
          marketInt={manageInt}
        />
      )}
    </>
  );
}