import type { LucideIcon } from "lucide-react";
import { Timer, Zap, ZoomIn } from "lucide-react";

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

const values: {
  icon: LucideIcon;
  title: string;
  description: string;
}[] = [
  {
    icon: Timer,
    title: "تریگر رویداد",
    description:
      "با هر رویداد مثل ثبت فرم یا تغییر وضعیت، اقدام بعدی را خودکار اجرا کنید.",
  },
  {
    icon: ZoomIn,
    title: "شرط هوشمند",
    description:
      "مسیر متفاوت برای شرایط مختلف تعریف کنید و تصمیم‌گیری را سریع‌تر کنید.",
  },
  {
    icon: Zap,
    title: "اعلان خودکار",
    description:
      "تیم را در لحظه از تغییر وضعیت باخبر کنید تا هیچ موردی رها نشود.",
  },
];

interface Feature16Props {
  className?: string;
}

const Feature16 = ({ className }: Feature16Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <p className="mb-4 text-sm text-muted-foreground lg:text-base">
          قوانین ساده تعریف کنید تا وظایف تکراری بدون دخالت دست انجام شود. تیم روی تصمیم‌های مهم تمرکز می‌کند و سرعت اجرا بالاتر می‌رود.
        </p>
        <h2 className="text-3xl font-medium lg:text-xl">فرایندها را استاندارد و سریع کنید</h2>
        <div className="mt-14 grid gap-6 lg:mt-20 lg:grid-cols-3">
          {values.map(({ icon: Icon, title, description }) => (
            <div key={title} className="rounded-lg bg-accent p-5">
              <span className="mb-8 flex size-12 items-center justify-center rounded-full bg-background">
                <Icon className="size-6" />
              </span>
              <h3 className="mb-2 text-xl font-medium">{title}</h3>
              <p className="leading-7 text-muted-foreground">{description}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature16 };