import { ArrowRight } from "lucide-react";

import { cn } from "@/lib/utils";

interface JobOpening {
  title: string;
  location: string;
  url: string;
}

interface JobCategory {
  category: string;
  openings: JobOpening[];
}

interface Careers4Props {
  heading?: string;
  jobs?: JobCategory[];
  className?: string;
}

const defaultJobs: JobCategory[] = [
  {
    category: "مهندسی",
    openings: [
      {
        title: "توسعه‌دهنده ارشد فرانت‌اند",
        location: "دورکاری",
        url: "#",
      },
      {
        title: "طراح رابط و تجربه کاربری",
        location: "تهران",
        url: "#",
      },
      {
        title: "توسعه‌دهنده ارشد بک‌اند",
        location: "دورکاری",
        url: "#",
      },
      {
        title: "سرپرست فنی",
        location: "اصفهان",
        url: "#",
      },
    ],
  },
  {
    category: "طراحی",
    openings: [
      {
        title: "طراح محصول",
        location: "دورکاری",
        url: "#",
      },
      {
        title: "طراح بصری",
        location: "شیراز",
        url: "#",
      },
    ],
  },
];

const Careers4 = ({
  heading = "فرصت‌های شغلی",
  jobs = defaultJobs,
  className,
}: Careers4Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container mx-auto">
        <h2 className="text-3xl font-medium md:text-xl">{heading}</h2>
        <div className="mt-6 flex flex-col gap-16 md:mt-14">
          {jobs.map((jobCategory) => (
            <div key={jobCategory.category} className="grid">
              <h2 className="border-b pb-4 text-xl font-bold">
                {jobCategory.category}
              </h2>
              {jobCategory.openings.map((job) => (
                <div
                  key={job.title}
                  className="flex items-center justify-between border-b py-4"
                >
                  <div>
                    <a href={job.url} className="font-semibold hover:underline">
                      {job.title}
                    </a>
                    <p className="text-sm text-muted-foreground">
                      {job.location}
                    </p>
                  </div>
                  <a href={job.url} className="hover:text-muted-foreground">
                    <ArrowRight className="size-4 rtl:rotate-180" />
                  </a>
                </div>
              ))}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Careers4 };