import React, { useState } from "react";
import { Link } from "react-router-dom";
import { toast } from "react-toastify";
import localImgLoad from "../../lib/localImgLoad";
import Icons from "../Helpers/Icons";

export default function ActiveJobsCard({
                                                className,
                                                datas,
                                                hidden = false,
                                            }) {
    //debugger;
    const [addFavorite, setValue] = useState(datas.whishlisted);
    const [options, setOption] = useState(false);
    const favoriteHandler = () => {
        if (!addFavorite) {
            setValue(true);
            toast.success("Added to Favorite List");
        } else {
            setValue(false);
            toast.warn("Remove to Favorite List");
        }
    };
    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"
                            >
                                View
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}