"use client";

import { MoveRight } from "lucide-react";

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

const sections = [
  {
    title: "تقویم تیمی",
    description:
      "برنامه تیم را هماهنگ کنید و تداخل وظایف را کاهش دهید.",
    image: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
    imageAlt: "تقویم تیم",
    imageFirst: true,
  },
  {
    title: "اشتراک فایل",
    description:
      "نسخه درست فایل همیشه در دسترس همه اعضا باشد.",
    image: "/block-media/shadcnblocks/block/placeholder-dark-2.svg",
    imageAlt: "فضای همکاری تیمی",
    imageFirst: false,
  },
  {
    title: "منشن و بحث",
    description:
      "بحث را کنار هر تسک نگه دارید تا تصمیم‌ها گم نشود.",
    image: "/block-media/shadcnblocks/block/placeholder-dark-3.svg",
    imageAlt: "برد مدیریت پروژه",
    imageFirst: true,
  },
];

function FeatureRow({
  title,
  description,
  image,
  imageAlt,
  imageFirst,
}: (typeof sections)[number]) {
  const imageBlock = (
    <div className="flex w-full items-center bg-muted md:w-1/2">
      <img
        src={image}
        alt={imageAlt}
        className="max-h-64 w-full object-cover"
      />
    </div>
  );

  const textBlock = (
    <div className="flex w-full flex-col justify-center gap-6 px-8 py-7 text-start md:w-1/2 md:px-12 md:py-10">
      <h6 className="text-lg font-semibold md:text-xl">{title}</h6>
      <div className="h-px w-full bg-muted-foreground" />
      <p className="text-muted-foreground">{description}</p>
      <a
        href="#"
        className="inline-flex items-center font-medium hover:underline"
      >
        <span>بیشتر بدانید</span>
        <MoveRight strokeWidth={2} className="ms-2 size-4 rtl:rotate-180" />
      </a>
    </div>
  );

  return (
    <div className="mt-16 flex flex-col overflow-hidden rounded-2xl bg-muted md:flex-row">
      {imageFirst ? (
        <>
          {imageBlock}
          {textBlock}
        </>
      ) : (
        <>
          {textBlock}
          {imageBlock}
        </>
      )}
    </div>
  );
}

interface Feature138Props {
  className?: string;
}

const Feature138 = ({ className }: Feature138Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <h2 className="text-start text-xl font-semibold">
          همکاری از راه دور را ساده کنید
        </h2>
        <p className="mt-3 text-start text-xl font-medium text-muted-foreground">
          هر عضو بداند چه زمانی چه کاری دارد
        </p>

        {sections.map((section) => (
          <FeatureRow key={section.title} {...section} />
        ))}
      </div>
    </section>
  );
};

export { Feature138 };