import { ArrowRight } from "lucide-react";

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

interface Role {
  title: string;
  location: string;
  href: string;
}

interface Department {
  title: string;
  roles: Role[];
  className?: string;
}

interface Careers1Props {
  title?: string;
  description?: string;
  departments?: Department[];
  className?: string;
}

const defaultDepartments: Department[] = [
  {
    title: "فروش",
    roles: [
      {
        title: "مدیر فروش",
        location: "تهران",
        href: "#",
      },
      {
        title: "کارشناس توسعه بازار",
        location: "تهران",
        href: "#",
      },
      {
        title: "مدیر فروش",
        location: "تهران",
        href: "#",
      },
    ],
  },
  {
    title: "موفقیت مشتری",
    roles: [
      {
        title: "کارشناس موفقیت مشتری",
        location: "تهران",
        href: "#",
      },
    ],
  },
];

const Careers1 = ({
  title = "فرصت‌های شغلی",
  description = "موقعیت‌های شغلی باز ما را مشاهده کنید.",
  departments = defaultDepartments,
  className,
}: Careers1Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("bg-background py-32", className)}>
      <div className="container">
        <h2 className="text-xl font-medium md:text-2xll">{title}</h2>
        <p className="mt-6 whitespace-pre-wrap text-muted-foreground md:mb-20 md:text-lg">
          {description}
        </p>
        {departments.map((department) => (
          <div key={department.title} className="mt-12 md:mt-20">
            <h3 className="mb-8 text-3xl font-medium md:text-xl">
              {department.title}
            </h3>
            <ul className="divide-y divide-border border-y border-border">
              {department.roles.map((role, index) => (
                <li key={index} className="group">
                  <a href={role.href} className="flex items-center py-6">
                    <div>
                      <div className="font-medium md:text-lg">{role.title}</div>
                      <div className="text-xs text-muted-foreground md:mt-2 md:text-sm">
                        {role.location}
                      </div>
                    </div>
                    <ArrowRight className="ms-auto size-6 translate-x-6 opacity-0 transition-all group-hover:translate-x-0 group-hover:opacity-100 rtl:-translate-x-6 rtl:rotate-180 rtl:group-hover:translate-x-0" />
                  </a>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </section>
  );
};

export { Careers1 };