import { Bolt, Cloud, Star } from "lucide-react";

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

const features = [
  {
    id: "feature-1",
    title: "لاگ اجرا",
    description:
      "با هر رویداد مثل ثبت فرم یا تغییر وضعیت، اقدام بعدی را خودکار اجرا کنید.",
    icon: Cloud,
  },
  {
    id: "feature-2",
    title: "قالب آماده",
    description:
      "مسیر متفاوت برای شرایط مختلف تعریف کنید و تصمیم‌گیری را سریع‌تر کنید.",
    icon: Star,
  },
  {
    id: "feature-3",
    title: "اتصال ابزار",
    description:
      "تیم را در لحظه از تغییر وضعیت باخبر کنید تا هیچ موردی رها نشود.",
    icon: Bolt,
  },
];

interface Feature58Props {
  className?: string;
}

const Feature58 = ({ className }: Feature58Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="grid gap-x-20 rounded-lg border border-border bg-accent p-6 md:grid-cols-2 md:p-8 lg:p-16">
          <div className="mb-8 flex justify-center lg:justify-start xl:mb-0">
            <img
              src="/block-media/shadcnblocks/block/placeholder-dark-1.svg"
              alt="سازنده گردش‌کار"
              className="aspect-square h-full w-full rounded-md object-cover object-center"
            />
          </div>
          <ul className="flex flex-col justify-center gap-y-8">
            {features.map((feature) => (
              <li key={feature.id} className="flex">
                <feature.icon className="ms-3 size-5 shrink-0 lg:ms-6 lg:size-6" />
                <div>
                  <div className="mb-3 h-5 text-sm font-semibold text-accent-foreground md:text-base">
                    {feature.title}
                  </div>
                  <div className="text-sm font-medium text-muted-foreground md:text-base">
                    {feature.description}
                  </div>
                </div>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
};

export { Feature58 };