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

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

const jobs = [
  {
    title: "مهندس ارشد نرم‌افزار",
    location: "دورکاری",
    city: "تهران",
    type: "تمام‌وقت",
    link: "#",
  },
  {
    title: "مدیر محصول",
    location: "دورکاری",
    city: "اصفهان",
    type: "تمام‌وقت",
    link: "#",
  },
];

interface Careers2Props {
  className?: string;
}

const Careers2 = ({ className }: Careers2Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container px-1">
        <div className="border-x border-dashed">
          <div className="relative flex flex-col gap-6 border-b border-dashed px-4 pt-10 pb-10 sm:items-center md:pb-20">
            <div className="absolute inset-0 -z-10 h-full w-full bg-[linear-gradient(to_right,hsl(var(--muted))_1px,transparent_1px),linear-gradient(to_bottom,hsl(var(--muted))_1px,transparent_1px)] [mask-image:radial-gradient(ellipse_50%_100%_at_50%_50%,transparent_60%,#000_100%)] bg-[size:64px_64px]"></div>
            <Badge variant="outline" className="w-fit">
              فرصت‌های شغلی
            </Badge>
            <h1 className="text-xl font-bold md:text-xl">موقعیت‌های شغلی باز</h1>
            <p className="text-muted-foreground">
              موقعیت مناسب خود را پیدا نکردید؟
              <a href="#" className="ms-1 underline">
                رزومه ارسال کنید.
              </a>
            </p>
          </div>
          <div>
            {jobs.map((job) => (
              <div
                key={job.title}
                className="grid items-center gap-6 border-b border-dashed px-6 py-10 lg:grid-cols-4"
              >
                <h2 className="text-lg">{job.title}</h2>
                <div className="col-span-2 flex flex-col gap-4 text-sm text-muted-foreground sm:flex-row sm:gap-8 lg:justify-center">
                  <div className="flex gap-2">
                    <Clock className="h-auto w-4" />
                    {job.type}
                  </div>
                  <div className="flex gap-2">
                    <MapPin className="h-auto w-4" />
                    {job.city}
                  </div>
                  <div className="flex gap-2">
                    <Target className="h-auto w-4" />
                    {job.location}
                  </div>
                </div>
                <a
                  href={job.link}
                  className={cn(buttonVariants(), "w-fit gap-1 lg:ms-auto")}
                >
                  مشاهده و درخواست
                  <ArrowRight className="h-auto w-4 rtl:rotate-180" />
                </a>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export { Careers2 };