"use client";

import React from "react";
import { Button } from "@/components/ui/button";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";

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

interface Props {
  openings: JobOpening[];
  setSelectedJob: (job: JobOpening) => void;
  setOpenModal: (open: boolean) => void;
}

const AccordionList: React.FC<Props> = ({ openings, setSelectedJob, setOpenModal }) => {
  if (!openings || openings.length === 0) return null;

  return (
    <div className="w-full max-w-6xl space-y-2">
      <Accordion type="single" collapsible className="w-full">
        {openings.map((job, index) => {
          const value = String(job.id ?? index);
          return (
            <AccordionItem
              key={value}
              value={value}
              className="bg-[#f1f1f1] shadow-sm border mb-2 border-[#e5e5e5]"
            >
              <AccordionTrigger className="flex justify-between items-center px-4 py-3 text-sm font-bold text-left cursor-pointer hover:no-underline [&>svg]:text-black [&>svg]:h-7 [&>svg]:w-6 [&>svg]:stroke-3">
                <span className="text-[#4caf50] font-semibold leading-4.5 text-[16px] sm:text-[19px]">
                  {index + 1}.{" "}
                  <span className="text-[#4caf50] font-medium ">{job.title}</span>
                </span>
              </AccordionTrigger>

              <AccordionContent className="px-4 pb-3 text-[16px] text-black bg-white overflow-auto">
                <div
                  className="space-y-3 [&_ul]:list-disc [&_ul]:pl-5 [&_ol]:list-decimal [&_ol]:pl-5 [&_li]:ml-1"
                  dangerouslySetInnerHTML={{
                    __html: job.shortDescription || job.longDescription || "",
                  }}
                />

                <div className="flex justify-center mt-6">
                  <Button
                    className="w-[140px] h-[34px] bg-[#FF6633] text-white font-light text-[14px] px-3 py-2 rounded-sm shadow-md hover:opacity-90 cursor-pointer"
                    onClick={() => {
                      setSelectedJob(job);
                      setOpenModal(true);
                    }}
                  >
                    Apply Now
                  </Button>
                </div>
              </AccordionContent>
            </AccordionItem>
          );
        })}
      </Accordion>
    </div>
  );
};

export default AccordionList;