import React from "react";
import CountDown from "../Helpers/CountDown";
// import HomeSliders from "./HomeSliders";
import { useSelector } from "react-redux";

export default function WorkerDashboard({
  className,
  bannerList,
  nextDueTask,
}) {
  const { userDetails } = useSelector((state) => state?.userDetails);

  let loginDate = userDetails?.last_login.split(" ")[0];
  let { firstname, lastname, email } = userDetails;
  let userEmail = email.split("@")[0];

  return (
    <div
      className={`w-full md:h-[47px] xxs:h-[74px] flex px-[1.05rem] py-[0.35rem] flex-wrap justify-between items-center gap-2 rounded-2xl overflow-hidden bg-sky-blue ${
        className || ""
      }`}
      style={{
        // background: `url(${heroBg})`,
        backgroundRepeat: "no-repeat",
        backgroundSize: "cover",
      }}
    >
      <div className="h-full flex flex-wrap w-full justify-between mb-5 lg:mb-0">
        {/* heading */}
        <div className="flex gap-8">
          <h1 className="text-base font-medium text-white tracking-wide">
            Welcome
          </h1>
          {/* user */}
          <div className="flex flex-col gap-1">
            <p className="text-base tracking-wide font-bold antise text-white leading-[1]">
              {`${firstname} ${lastname}`}
            </p>
            <p className="text-sm tracking-wide text-white leading-[1]">
              @{userEmail}
            </p>
          </div>
        </div>

        {/* countdown */}
        {nextDueTask?.next_due &&
          Object.keys(nextDueTask.next_due)?.length != 0 && (
            <div className="w-full h-32 flex justify-evenly items-center sm:p-6 p-1 rounded-2xl border back-dark1 border-white-opacity">
              <div className="flex flex-col justify-between">
                <p className="text-base text-white tracking-wide">
                  Current Task
                </p>
                <p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
                  {nextDueTask.next_due.item_code.substr(0, 4) + "..."}
                </p>
                <p className="text-base text-white tracking-wide">
                  {nextDueTask.next_due.price * 0.01} Naira
                </p>
              </div>
              <div className="w-[1px] h-full bg-white-opacity"></div>
              <div className="flex flex-col justify-between">
                <p className="text-base text-white tracking-wide">
                  Next due in
                </p>
                <p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
                  {/* <CountDown lastDate="2023-04-26 4:00:00" /> */}
                  <CountDown lastDate={nextDueTask.next_due.due_date} />
                </p>
                <div className="text-base text-white tracking-wide flex gap-[23px]">
                  <span>Hrs</span>
                  <span>Min</span>
                  <span>Sec</span>
                </div>
              </div>
            </div>
          )}
        <span className="text-base font-thin tracking-wide text-white flex items-end">
          Last Login : {loginDate}
        </span>
      </div>
    </div>
  );
}