Career 6

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { Button, type ButtonProps } from "@/components/ui/button";
import { Card } from "@/components/ui/card";

type JobProps = {
  title: string;
  location: string;
  description: string;
  button: ButtonProps;
  url: string;
};

type JobDepartmentProps = {
  title: string;
  jobs: JobProps[];
};

type Props = {
  tagline: string;
  heading: string;
  description: string;
  jobDepartments: JobDepartmentProps[];
};

export type Career6Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;

export const Career6 = (props: Career6Props) => {
  const { tagline, heading, description, jobDepartments } = {
    ...Career6Defaults,
    ...props,
  };
  return (
    <section className="px-[5%] py-16 md:py-24 lg:py-28">
      <div className="container">
        <div className="grid auto-cols-fr gap-x-12 gap-y-12 md:grid-cols-2 lg:grid-cols-[0.75fr_1fr] lg:gap-x-20">
          <div className="max-w-lg">
            <p className="mb-3 font-semibold md:mb-4">{tagline}</p>
            <h2 className="mb-5 text-h2 font-bold md:mb-6">{heading}</h2>
            <p className="text-medium">{description}</p>
          </div>
          <Accordion type="multiple">
            {jobDepartments.map((jobDepartment, index) => (
              <AccordionItem key={index} value={`item-${index}`} className="first:border-t-0">
                <AccordionTrigger className="text-h4 md:py-5">
                  {jobDepartment.title}
                </AccordionTrigger>
                <AccordionContent className="mb-6 flex flex-col gap-6 pb-0 md:mb-8 md:gap-8">
                  {jobDepartment.jobs.map((job, index) => (
                    <Card key={index} className="p-6 md:p-8">
                      <div className="mb-5 sm:flex sm:items-start sm:justify-between md:mb-6">
                        <div className="mb-5 sm:mb-0">
                          <h3 className="text-h5 font-bold">{job.title}</h3>
                          <p className="text-medium">{job.location}</p>
                        </div>
                        <div>
                          <Button {...job.button} asChild>
                            <a href={job.url}>{job.button.title}</a>
                          </Button>
                        </div>
                      </div>
                      <p>{job.description}</p>
                    </Card>
                  ))}
                </AccordionContent>
              </AccordionItem>
            ))}
          </Accordion>
        </div>
      </div>
    </section>
  );
};

const job: JobProps = {
  title: "Job Title",
  location: "Location",
  description:
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.",
  url: "#",
  button: {
    title: "Apply Now",
    variant: "secondary",
    size: "sm",
  },
};

export const Career6Defaults: Props = {
  tagline: "Tagline",
  heading: "Job Openings",
  description:
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
  jobDepartments: [
    {
      title: "Job Department",
      jobs: [job, job, job],
    },
    {
      title: "Job Department",
      jobs: [job, job, job],
    },
    {
      title: "Job Department",
      jobs: [job, job, job],
    },
  ],
};