import { useState } from "react";
import { toast } from "react-toastify";
import localImgLoad from "../../lib/localImgLoad";
import CountDown from "../Helpers/CountDown";
import Icons from "../Helpers/Icons";
import {PriceFormatter} from '../Helpers/PriceFormatter'


export default function FamilyOfferCard({ 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}`
                            )}) 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>
            </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>
    );
}