Career 7

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

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 Career7Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;

export const Career7 = (props: Career7Props) => {
  const { tagline, heading, description, jobDepartments } = {
    ...Career7Defaults,
    ...props,
  };
  return (
    <section className="px-[5%] py-16 md:py-24 lg:py-28">
      <div className="mx-auto max-w-lg">
        <div className="mb-12 text-center md:mb-18 lg:mb-20">
          <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" className="grid items-start justify-stretch gap-6">
          {jobDepartments.map((jobDepartment, index) => (
            <Card key={index} className="mb-6">
              <AccordionItem value={`item-${index}`} className="border-none px-6 md:px-8">
                <AccordionTrigger
                  icon={
                    <Add className="size-7 shrink-0 text-scheme-text transition-transform duration-300 md:size-8" />
                  }
                  className="text-h4 md:py-5 [&[data-state=open]>svg]:rotate-45"
                >
                  {jobDepartment.title}
                </AccordionTrigger>
                <AccordionContent className="pb-0">
                  {jobDepartment.jobs.map((job, index) => (
                    <div key={index} className="border-t border-scheme-border py-6 md:py-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 className="w-full max-w-lg">{job.description}</p>
                    </div>
                  ))}
                </AccordionContent>
              </AccordionItem>
            </Card>
          ))}
        </Accordion>
      </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 Career7Defaults: 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],
    },
  ],
};