"use client";

import React, { useState } from "react";
import AccordionList from "./AccordionList";
import ApplyModal from "./ApplyModal";

interface JobOpening {
  id: number | string;
  title: string;
  shortDescription?: string;
  longDescription?: string;
  slug?: string;
}

export default function AccordionWrapper({ openings }: { openings: JobOpening[] }) {
  const [openModal, setOpenModal] = useState(false);
  const [selectedJob, setSelectedJob] = useState<JobOpening | null>(null);

  return (
    <div className="flex flex-col items-center min-h-screen bg-white py-2 sm:py-8 px-1 sm:px-6 lg:px-8">

      <div className="mb-8">
        <button
          className="w-[140px] h-[34px] bg-[#FF6633] text-white font-bold text-[14px] px-[12px] py-[6px] rounded-sm shadow-md hover:opacity-90 cursor-pointer"
          onClick={() => {
            setSelectedJob(null); 
            setOpenModal(true);
          }}
        >
          APPLY
        </button>
      </div>

      
      <AccordionList
        openings={openings}
        setSelectedJob={setSelectedJob}
        setOpenModal={setOpenModal}
      />

      
      <ApplyModal
        jobTitle={selectedJob?.title || ""}
        open={openModal}
        onClose={() => setOpenModal(false)}
      />
    </div>
  );
}