import { ArrowRight, MapPin } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";

const jobs = [
  {
    category: "مهندسی",
    openings: [
      {
        title: "مهندس ارشد نرم‌افزار",
        description:
          "مسئول توسعه و نگهداری سامانه‌های نرم‌افزاری پیشرفته.",
        location: "دفتر تهران یا دورکاری",
        link: "#",
      },
      {
        title: "مدیر محصول",
        description: "نسل بعدی محصولات را با تیم طراحی و مهندسی توسعه دهید.",
        location: "دفتر اصفهان یا دورکاری",
        link: "#",
      },
      {
        title: "مهندس تضمین کیفیت",
        description:
          "کیفیت محصولات نرم‌افزاری را از طریق تست و خودکارسازی تضمین کنید.",
        location: "دفتر شیراز یا دورکاری",
        link: "#",
      },
      {
        title: "کارشناس پشتیبانی فنی",
        description:
          "پشتیبانی فنی به مشتریان و تیم‌های داخلی ارائه دهید.",
        location: "دفتر مشهد یا دورکاری",
        link: "#",
      },
    ],
  },
  {
    category: "بازاریابی",
    openings: [
      {
        title: "نویسنده محتوا",
        description:
          "محتوای تخصصی برای وبلاگ، وب‌سایت و شبکه‌های اجتماعی تولید کنید.",
        location: "تبریز",
        link: "#",
      },
      {
        title: "مدیر شبکه‌های اجتماعی",
        description:
          "استراتژی شبکه‌های اجتماعی را اجرا کنید و با مخاطبان تعامل داشته باشید.",
        location: "کرمان",
        link: "#",
      },
    ],
  },
];

interface Careers3Props {
  className?: string;
}

const Careers3 = ({ className }: Careers3Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mx-auto max-w-5xl">
          <h1 className="text-3xl font-bold md:text-2xll">موقعیت‌های شغلی باز</h1>
          <div className="mx-auto mt-14 flex flex-col gap-16">
            {jobs.map((jobCategory) => (
              <div key={jobCategory.category}>
                <Badge>{jobCategory.category}</Badge>
                <div>
                  {jobCategory.openings.map((job) => (
                    <a
                      href={job.link}
                      key={job.title}
                      className="group block border-b py-7"
                    >
                      <h3 className="text-xl font-semibold group-hover:underline">
                        {job.title}
                      </h3>
                      <p className="mt-1 font-medium text-muted-foreground">
                        {job.description}
                      </p>
                      <div className="mt-4 flex justify-between gap-4 text-muted-foreground">
                        <div className="flex gap-2 text-sm md:text-base">
                          <MapPin className="h-auto w-4 shrink-0" />
                          <p>{job.location}</p>
                        </div>
                        <ArrowRight className="h-auto w-4 rtl:rotate-180" />
                      </div>
                    </a>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export { Careers3 };