"use client";

import { ArrowLeft } from "lucide-react";

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

interface Feature188Resource {
  title: string;
  description: string;
  href: string;
  imageSrc: string;
}

interface Feature188Props {
  className?: string;
  title?: string;
  resources?: Feature188Resource[];
}

const defaultResources: Feature188Resource[] = [
  {
    title: "نصب نسخه اختصاصی برای هر مجموعه",
    description:
      "هر سازمان نسخهٔ جداگانه و مستقل از سامانه را روی سرور خود دریافت می‌کند. داده‌ها کاملاً در اختیار شما می‌مانند و امنیت و کنترل کامل بر اطلاعات خود دارید.",
    href: "#",
    imageSrc:
      "https://deifkwefumgah.cloudfront.net/shadcnblocks/block/placeholder-8-wide.svg",
  },
  {
    title: "امکان شخصی‌سازی کامل بر اساس مدل کاری",
    description:
      "ماژول‌ها، فیلدها و گردش‌کارها متناسب با فرایندهای داخلی مجموعهٔ شما تنظیم می‌شوند. سامانه دقیقاً با نیاز و مدل کاری شما هماهنگ می‌شود.",
    href: "#",
    imageSrc:
      "https://deifkwefumgah.cloudfront.net/shadcnblocks/block/placeholder-8-wide.svg",
  },
  {
    title: "پشتیبانی مستقیم و توسعه مستمر",
    description:
      "تیم فنی ما به‌صورت مستقیم پاسخگوی سوالات و مشکلات شماست. امکانات جدید و به‌روزرسانی‌های امنیتی و عملکردی به‌طور منظم ارائه می‌شود.",
    href: "#",
    imageSrc:
      "https://deifkwefumgah.cloudfront.net/shadcnblocks/block/placeholder-8-wide.svg",
  },
];

const Feature188 = ({
  className,
  title = "چرا این سامانه انتخاب مجموعه‌های حرفه‌ای است؟",
  resources = defaultResources,
}: Feature188Props) => {
  return (
    <section
      dir="rtl"
      className={cn(
        "relative w-full overflow-hidden border-t border-border/50 bg-background py-16 md:py-24 lg:py-32",
        className,
      )}
    >
      <div className="container mx-auto max-w-5xl px-4 sm:px-6">
        <h2 className="text-center text-heading-2 font-semibold leading-[var(--line-height-heading)] text-foreground sm:text-heading-2 lg:text-heading-2">
          {title}
        </h2>

        <div className="mx-auto mt-10 sm:mt-12 rounded-2xl border border-border bg-background overflow-hidden">
          {resources.map((resource, index) => (
            <div
              key={index}
              className={cn(
                index !== resources.length - 1 && "border-b border-border",
              )}
            >
              <a
                href={resource.href}
                className="flex flex-col gap-4 p-4 md:flex-row md:items-center md:justify-between md:gap-6 lg:p-6"
              >
                <div className="flex min-w-0 flex-1 items-start gap-4 sm:gap-5">
                  <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-muted p-2 lg:h-14 lg:w-14">
                    <ArrowLeft className="h-5 w-5 text-muted-foreground sm:h-6 sm:w-6" />
                  </span>
                  <div className="min-w-0 flex-1 space-y-1">
                    <h3 className="text-heading-4 font-semibold leading-[var(--line-height-heading)] text-foreground sm:text-heading-3">
                      {resource.title}
                    </h3>
                    <p className="text-body-sm leading-[var(--line-height-body)] text-muted-foreground sm:text-body">
                      {resource.description}
                    </p>
                  </div>
                </div>

                <div className="mt-4 w-full shrink-0 md:mt-0 md:w-52 lg:w-60">
                  <div className="aspect-video w-full overflow-hidden rounded-lg bg-muted">
                    <img
                      src={resource.imageSrc}
                      alt={resource.title}
                      className="h-full w-full object-cover"
                    />
                  </div>
                </div>
              </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature188 };