import type { ReactNode } from "react";
import {
  BatteryCharging,
  GitPullRequest,
  Layers,
  RadioTower,
  SquareKanban,
  WandSparkles,
} from "lucide-react";

import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

interface Feature {
  heading: string;
  description: string;
  icon: ReactNode;
}

interface Feature43Props {
  title?: string;
  features?: Feature[];
  buttonText?: string;
  buttonUrl?: string;
  className?: string;
}

const Feature43 = ({
  title = "زمان حل مسئله را کوتاه کنید",
  features = [
    {
      heading: "تاریخچه مشتری",
      description:
        "پاسخ‌های پرتکرار را ذخیره کنید و با یک کلیک ارسال کنید.",
      icon: <GitPullRequest className="size-6" />,
    },
    {
      heading: "صندوق یکپارچه",
      description:
        "همه کانال‌های ارتباطی را در یک محیط مدیریت کنید و هیچ پیامی گم نشود.",
      icon: <SquareKanban className="size-6" />,
    },
    {
      heading: "اولویت‌بندی تیکت",
      description:
        "تیکت‌های مهم بر اساس قرارداد یا شدت مسئله در صف بالاتر قرار می‌گیرند.",
      icon: <RadioTower className="size-6" />,
    },
    {
      heading: "پایگاه دانش",
      description:
        "مشتریان و تیم با مقالات راهنما سریع‌تر به پاسخ می‌رسند.",
      icon: <WandSparkles className="size-6" />,
    },
    {
      heading: "پاسخ آماده",
      description:
        "پاسخ‌های پرتکرار را ذخیره کنید و با یک کلیک ارسال کنید.",
      icon: <Layers className="size-6" />,
    },
    {
      heading: "SLA هوشمند",
      description:
        "همه کانال‌های ارتباطی را در یک محیط مدیریت کنید و هیچ پیامی گم نشود.",
      icon: <BatteryCharging className="size-6" />,
    },
  ],
  buttonText = "رضایت مشتری",
  buttonUrl = "https://ShadcnBlocks",
  className,
}: Feature43Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        {title && (
          <div className="mx-auto mb-16 max-w-3xl text-center">
            <h2 className="text-xl font-medium text-pretty lg:text-2xll">
              {title}
            </h2>
          </div>
        )}
        <div className="grid gap-10 md:grid-cols-2 lg:grid-cols-3">
          {features.map((feature, i) => (
            <div key={i} className="flex flex-col">
              <div className="mb-5 flex size-16 items-center justify-center rounded-full bg-accent">
                {feature.icon}
              </div>
              <h3 className="mb-2 text-xl font-semibold">{feature.heading}</h3>
              <p className="text-muted-foreground">{feature.description}</p>
            </div>
          ))}
        </div>
        {buttonUrl && (
          <div className="mt-16 flex justify-center">
            <Button size="lg" asChild>
              <a href={buttonUrl}>{buttonText}</a>
            </Button>
          </div>
        )}
      </div>
    </section>
  );
};

export { Feature43 };