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

const features = [
  {
    reversed: false,
    title: "تقویم تیمی",
    description:
      "برنامه تیم را هماهنگ کنید و تداخل وظایف را کاهش دهید.",
    imageAlt: "تقویم تیم",
  },
  {
    reversed: true,
    title: "اشتراک فایل",
    description:
      "نسخه درست فایل همیشه در دسترس همه اعضا باشد.",
    imageAlt: "فضای همکاری تیمی",
  },
  {
    reversed: false,
    title: "منشن و بحث",
    description:
      "بحث را کنار هر تسک نگه دارید تا تصمیم‌ها گم نشود.",
    imageAlt: "برد مدیریت پروژه",
  },
];

interface Feature62Props {
  className?: string;
}

const Feature62 = ({ className }: Feature62Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="flex flex-col space-y-10 md:space-y-16">
          {features.map((feature) => (
            <div
              key={feature.title}
              className={cn("lg:flex lg:gap-x-4", feature.reversed && "flex-row-reverse")}
            >
              <div className="lg:w-1/2">
                <div className="mb-6 md:mb-8 lg:mb-0">
                  <img
                    src="/block-media/shadcnblocks/block/placeholder-1.svg"
                    alt={feature.imageAlt}
                    className="aspect-4/3 w-full rounded-md border border-border object-cover"
                  />
                </div>
              </div>
              <div
                className={cn(
                  "lg:flex lg:w-1/2 lg:items-center",
                  feature.reversed
                    ? "lg:pe-24 2xl:pe-32"
                    : "lg:ps-24 2xl:ps-32",
                )}
              >
                <div className="lg:text-start">
                  <h3 className="mb-3 text-xl font-semibold md:mb-4 md:text-xl lg:mb-6">
                    {feature.title}
                  </h3>
                  <p className="text-muted-foreground lg:text-lg">
                    {feature.description}
                  </p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature62 };