import React, { useState } from "react";
import { Link } from "react-router-dom";
import { toast } from "react-toastify";
import activeAidsBanner from "../../assets/images/kids-waiting.jpg";
import ParentWaitingTable from "./ParentWaitingTable";

export default function ParentWaiting({ className }) {
  const [addFavorite, setValue] = 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={`overview-section w-full ${className || ""}`}>
        <div className="w-full mb-3 flex justify-between items-center gap-1">
          <h1 className="text-26 font-bold text-dark-gray dark:text-white">
            Waiting for Parent to Get Started...
          </h1>
          <Link
            to='/familymarket'
            className="px-4 h-10 flex justify-center items-center btn-gradient text-base rounded-full text-white"
          >
            More Task
          </Link>
        </div>
        {/* <div className="overview-section-wrapper py-2 min-h-[450px] lg:flex lg:space-x-2 flex-1 lg:gap-8"> */}
        <div className="overview-section-wrapper py-2 min-h-[400px] lg:grid grid-cols-2 gap-4">
          <div className="mb-10 lg:mb-0 h-full w-full bg-white dark:bg-dark-white rounded-2xl overflow-hidden">
            <img
              src={activeAidsBanner}
              alt="banner"
              className="w-full h-full"
            />
          </div>

          <div className="overview-countdown h-full w-full flex flex-col justify-between p-4 rounded-2xl bg-white dark:bg-dark-white">
            {<ParentWaitingTable />}

            {/*          <div className="lg:mb-0 mb-3">*/}
            {/*              <h1 className="text-2xl font-bold text-dark-gray dark:text-white tracking-wide">*/}
            {/*                  Lock and Lob x Fiesta Spurs*/}
            {/*              </h1>*/}
            {/*              <span className="text-[18px] font-thin tracking-wide   text-dark-gray dark:text-white">*/}
            {/*  ID : 2320382*/}
            {/*</span>*/}
            {/*          </div>*/}
            {/*          /!* user *!/*/}
            {/*          <div className="flex items-center space-x-3 lg:mb-0 mb-3">*/}
            {/*              <div className="w-14 h-14 flex justify-center items-center rounded-full overflow-hidden">*/}
            {/*                  <img src={HeroUser} alt="" />*/}
            {/*              </div>*/}
            {/*              <div>*/}
            {/*                  <p className="text-xl tracking-wide font-bold antise   text-dark-gray dark:text-white">*/}
            {/*                      Brokln Simons*/}
            {/*                  </p>*/}
            {/*                  <p className="text-sm tracking-wide   text-dark-gray dark:text-white">*/}
            {/*                      @broklinslam_75*/}
            {/*                  </p>*/}
            {/*              </div>*/}
            {/*          </div>*/}
          </div>
        </div>
      </div>
    </>
  );
}