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

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

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

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

const Feature17 = ({
  label = "تحلیل داده",
  title = "داده پراکنده را به تصمیم تبدیل کنید",
  features = [
    {
      heading: "داشبورد سفارشی",
      description:
        "ویجت‌های موردنیاز هر تیم را بچینید و فقط معیارهای مرتبط را ببینید.",
      icon: <GitPullRequest className="size-4 md:size-6" />,
    },
    {
      heading: "فیلتر پیشرفته",
      description:
        "داده را بر اساس محصول، منطقه یا کانال برش دهید و الگو پیدا کنید.",
      icon: <SquareKanban className="size-4 md:size-6" />,
    },
    {
      heading: "نمودار روند",
      description:
        "تغییرات مهم را در طول زمان دنبال کنید و نقطه عطف را شناسایی کنید.",
      icon: <RadioTower className="size-4 md:size-6" />,
    },
    {
      heading: "هشدار آستانه",
      description:
        "وقتی شاخص از حد مجاز گذشت، فوراً مطلع شوید.",
      icon: <WandSparkles className="size-4 md:size-6" />,
    },
    {
      heading: "گزارش زمان‌بندی‌شده",
      description:
        "ویجت‌های موردنیاز هر تیم را بچینید و فقط معیارهای مرتبط را ببینید.",
      icon: <Layers className="size-4 md:size-6" />,
    },
    {
      heading: "تحلیل کوHORT",
      description:
        "داده را بر اساس محصول، منطقه یا کانال برش دهید و الگو پیدا کنید.",
      icon: <BatteryCharging className="size-4 md:size-6" />,
    },
  ],
  buttonText = "داشبورد سفارشی",
  buttonUrl = "https://ShadcnBlocks",
  className,
}: Feature17Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        {(label || title) && (
          <div className="mb-12 flex max-w-3xl flex-col gap-4">
            <Badge variant="secondary">{label}</Badge>
            <h2 className="text-3xl font-medium md:text-xl lg:text-2xll">
              {title}
            </h2>
          </div>
        )}
        <div className="grid gap-12 md:grid-cols-2">
          {features.map((feature, idx) => (
            <div className="flex gap-6 space-y-4 rounded-lg md:block" key={idx}>
              <span className="flex size-10 shrink-0 items-center justify-center rounded-full bg-accent md:size-12">
                {feature.icon}
              </span>
              <div>
                <h3 className="font-medium md:mb-2 md:text-xl">
                  {feature.heading}
                </h3>
                <p className="text-sm text-muted-foreground md:text-base">
                  {feature.description}
                </p>
              </div>
            </div>
          ))}
        </div>
        {buttonUrl && (
          <div className="mt-16 flex justify-center">
            <Button size="lg" asChild>
              <a href={buttonUrl}>{buttonText}</a>
            </Button>
          </div>
        )}
      </div>
    </section>
  );
};

export { Feature17 };