import type { LucideIcon } from "lucide-react";
import { Clock, Heart, Home, Wallet } from "lucide-react";

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

interface FaqItem {
  icon: LucideIcon;
  heading: string;
  description: string;
}

interface Faq15Props {
  title?: string;
  items?: FaqItem[];
  className?: string;
}

const defaultItems: FaqItem[] = [
  {
    icon: Heart,
    heading: "یک جان را نجات دهید، یک دوست پیدا کنید",
    description:
      "با انتخاب به‌سرپرستی، به حیوانی شایسته فرصت دوم برای خوشبختی می‌دهید و در عوض یک همراه وفادار پیدا می‌کنید که شادی را به زندگی‌تان می‌آورد.",
  },
  {
    icon: Wallet,
    heading: "مقرون‌به‌صرفه‌تر از خرید",
    description:
      "هزینه به‌سرپرستی معمولاً شامل واکسیناسیون، میکروچیپ و عقیم‌سازی است و از خرید از پرورش‌دهنده مقرون‌به‌صرفه‌تر است.",
  },
  {
    icon: Clock,
    heading: "از مرحله توله‌سگی بگذرید",
    description:
      "بسیاری از حیوانات پناهگاه از قبل نظافت و دستورات پایه را یاد گرفته‌اند و زمان و تلاش کمتری برای آموزش نیاز دارید.",
  },
  {
    icon: Home,
    heading: "از پناهگاه‌های محلی حمایت کنید",
    description:
      "به‌سرپرستی شما به کار مهم پناهگاه‌های محلی کمک می‌کند تا به نجات و مراقبت از حیوانات نیازمند ادامه دهند.",
  },
];

const Faq15 = ({
  title = "چرا باید حیوان خانگی‌تان را از پناهگاه محلی به‌سرپرستی بگیرید؟",
  items = defaultItems,
  className,
}: Faq15Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container mx-auto max-w-3xl">
        <h2 className="text-center text-3xl font-semibold md:text-2xll">
          {title}
        </h2>
        <ul className="mt-12 grid grid-cols-1 gap-8 text-start md:grid-cols-2 md:gap-10">
          {items.map((item, idx) => (
            <li className="flex flex-col gap-2.5" key={idx}>
              <div className="flex items-center gap-2 md:gap-2.5">
                <item.icon className="size-5 shrink-0 md:size-6" />
                <h3 className="font-semibold md:text-lg">{item.heading}</h3>
              </div>
              <p className="text-sm text-muted-foreground md:text-base">
                {item.description}
              </p>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
};

export { Faq15 };