import React, { useState } from "react";
import Layout from "../Partials/Layout";
import MyJobTable from "./MyJobTable";
import CommonHead from "../UserHeader/CommonHead";
import AddJobPage from "../../views/AddJobPage";

export default function MyJobs(props) {
  const [popUp, setPopUp] = useState(false);
  const popUpHandler = () => {
    setPopUp((prev) => !prev);
  };

  const categoryOptions = props.MyJobList?.data?.categories;

  return (
    <Layout>
      <CommonHead commonHeadData={props.commonHeadData} />
      <div className="notification-page w-full mb-10">
        <div className="notification-wrapper w-full">
          {/* heading */}
          <div className="sm:flex items-center mb-6">
            <div className="mb-5 sm:mb-0">
              <h1 className="text-26 font-bold flex items-center space-x-1  text-dark-gray dark:text-white gap-2">
                <span>My Jobs</span>

                <button
                  className="text-white btn-gradient text-lg tracking-wide px-5 py-2 rounded-full"
                  onClick={popUpHandler}
                >
                  Add Job
                </button>
              </h1>
            </div>
          </div>
          <MyJobTable MyJobList={props.MyJobList} />
        </div>
      </div>

      {/* Add Job List Popout */}
      {popUp && (
        <AddJobPage
          action={popUpHandler}
          situation={popUp}
          categories={categoryOptions}
        />
      )}
      {/* End of Add Job List Popout */}
    </Layout>
  );
}