import styles from "./Career.module.scss";

import React, { useState } from "react";
import Head from "next/head";
import AppContext from "../../particles/contexts/app-context";

import AppTemplate from "../../templates/app";
import Footer from "../../organisms/footer";
import Header from "../../organisms/header";
import Jobs from "../../organisms/jobs";
import JobTable from "../../organisms/job-table";

const CareerPage = ({ jobs, appData }: any) => {
  const [selectedJob, setSelectedJob] = useState("");

  const handleJobSelect = (id: any) => {
    setSelectedJob(id);

    window.scroll({
      top: 0,
      behavior: "smooth",
    });
  };

  return (
    <AppContext.Provider value={appData}>
      <AppTemplate header={<Header />} footer={<Footer />}>
        <Head>
          <title>BASS</title>
        </Head>

        <main className={styles.main}>
          <div className="mb-16 lg:mb-24">
            <Jobs data={jobs} selectedJob={selectedJob} />
          </div>

          <div className="flex justify-center">
            <div className={styles.jobTable}>
              <JobTable data={jobs} handleJobSelect={handleJobSelect} />
            </div>
          </div>
        </main>
      </AppTemplate>
    </AppContext.Provider>
  );
};

export default CareerPage;
