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

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

const features: {
  icon: LucideIcon;
  title: string;
  description: string;
}[] = [
  {
    icon: Timer,
    title: "پیشنهاد عنوان",
    description:
      "ساختار عنوان و توضیحات را برای کلیک بیشتر بهینه کنید.",
  },
  {
    icon: Zap,
    title: "تحلیل کلمه کلیدی",
    description:
      "کلمات با پتانسیل بالا را پیدا کنید و استراتژی محتوا را بر همان اساس بچینید.",
  },
  {
    icon: ZoomIn,
    title: "ممیزی فنی",
    description:
      "خطاهای فنی که رتبه را پایین می‌آورد را سریع شناسایی و رفع کنید.",
  },
  {
    icon: PersonStanding,
    title: "ردیابی رتبه",
    description:
      "تغییرات رتبه را روزانه ببینید و واکنش سریع داشته باشید.",
  },
];

interface Feature10Props {
  className?: string;
}

const Feature10 = ({ className }: Feature10Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <p className="mb-4 text-xs text-muted-foreground">ترافیک ارگانیک</p>
        <h2 className="text-3xl font-medium lg:text-xl">
          رتبه کلمات کلیدی را پیگیری کنید
        </h2>
        <div className="mt-14 grid gap-6 md:grid-cols-2 lg:mt-20 lg:grid-cols-4">
          {features.map(({ icon: Icon, title, description }) => (
            <div
              key={title}
              className="relative flex gap-3 rounded-lg border-dashed md:block md:border-s md:p-5"
            >
              <span className="mb-8 flex size-10 shrink-0 items-center justify-center rounded-full bg-accent md:size-12">
                <Icon className="size-5 md:size-6" />
              </span>
              <div>
                <h3 className="font-medium md:mb-2 md:text-xl">
                  {title}
                  <span className="absolute -start-px hidden h-6 w-px bg-primary md:inline-block"></span>
                </h3>
                <p className="text-sm text-muted-foreground md:text-base">
                  {description}
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature10 };