import localImgLoad from "../../lib/localImgLoad";
import CountDown from "../Helpers/CountDown";
import { PriceFormatter } from "../Helpers/PriceFormatter";

export default function OfferCard({ datas, hidden = false, setOfferPopout }) {
  let thePrice = PriceFormatter(
    datas?.price * 0.01,
    datas?.currency_code,
    datas?.currency
  );

  return (
    <div className="card-style-one flex flex-col justify-between w-full h-[387px] bg-white dark:bg-dark-white   p-3 pb rounded-2xl">
      <div className="content">
        {/* thumbnail */}
        <div className="w-full h-40">
          {/* thumbnail image */}
          <div
            className="thumbnail w-full h-full rounded-xl overflow-hidden px-4 pt-4"
            style={{
              background: `url(${localImgLoad(
                `images/taskbanners/${datas?.banner || "default.jpg"}`
              )}) center / contain no-repeat`,
            }}
          >
            {hidden && <div className="flex justify-center"></div>}
          </div>
        </div>
        {/* details */}
        <div className="details">
          <h1 className="text-xl font-bold text-dark-gray dark:text-white mb-2 capitalize line-clamp-1">
            {datas.title}
          </h1>
          {/* countdown */}
          {/* <div className="w-full h-[54px] flex justify-evenly items-center p-2 rounded-lg border border-[#E3E4FE] dark:border-[#a7a9b533] ">
                        <div className="flex flex-col justify-between">
                            <p className="text-sm text-thin-light-gray dark:text-white tracking-wide">
                                Task Code
                            </p>
                            <p className="text-base font-bold tracking-wide   text-dark-gray dark:text-white">
                                {datas.contract}
                            </p>
                        </div>
                        <div className="w-[1px] h-full bg-[#E3E4FE] dark:bg-[#a7a9b533] "></div>
                        <div className="flex flex-col justify-between">
                            <p className="text-sm text-thin-light-gray dark:text-white tracking-wide">
                                Remaining Time
                            </p>
                            <p className="text-base font-bold tracking-wide   text-dark-gray dark:text-white">
                                <CountDown lastDate={datas.expire} />
                            </p>
                        </div>
                    </div> */}
          <div className="w-full p-2 rounded-lg border border-[#E3E4FE] dark:border-[#a7a9b533] ">
            <div className="grid grid-cols-2 gap-2">
              <div className="flex flex-col justify-between items-center border-r-2">
                <p className="text-sm text-thin-light-gray dark:text-white tracking-wide">
                  Task Code
                </p>
                <p className="text-base font-bold tracking-wide   text-dark-gray dark:text-white">
                  {datas.contract}
                </p>
              </div>
              <div className="flex flex-col justify-between items-center">
                <p className="text-sm text-red-500 tracking-wide">Expires</p>
                <p className="text-base font-bold tracking-wide   text-dark-gray dark:text-white">
                  <CountDown lastDate={datas.expire} />
                </p>
              </div>
            </div>

            <hr className="my-2" />

            <div className="grid grid-cols-2 gap-2">
              <div className="flex flex-col justify-between items-center border-r-2">
                <p className="text-sm text-thin-light-gray dark:text-white tracking-wide">
                  Reward
                </p>
                <p className="text-base font-bold tracking-wide   text-dark-gray dark:text-white">
                  {thePrice}
                </p>
              </div>
              <div className="flex flex-col justify-between items-center">
                <p className="text-sm text-thin-light-gray dark:text-white tracking-wide">
                  Timeline
                </p>
                <p className="text-base font-bold tracking-wide   text-dark-gray dark:text-white">
                  {`${datas.timeline_days} day(s)`}
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="card-buttons flex justify-end items-center space-x-2">
        <button
          type="button"
          onClick={() =>
            setOfferPopout({ show: true, data: { ...datas, thePrice } })
          }
          className="btn-shine w-[98px] h-[33px] text-white rounded-full text-sm bg-pink flex justify-center items-center"
        >
          Start Task
        </button>
      </div>
    </div>
  );
}