import type { ReactNode } from "react";
import { Cable, Workflow, Wrench } from "lucide-react";

import { Card } from "@/components/ui/card";
import { cn } from "@/lib/utils";

interface DataItem {
  id: string;
  title: string;
  description: string;
  icon: ReactNode;
  className?: string;
}

const DATA: DataItem[] = [
  {
    id: "simplify-workflow",
    title: "سطح دسترسی",
    description: "گزارش سفارشی را بدون SQL بسازید و سریع منتشر کنید.",
    icon: <Workflow />,
    className: "lg:mt-0",
  },
  {
    id: "eliminate-clunky-tools",
    title: "تحلیل پیش‌بین",
    description: "ابعاد مختلف را بچرخانید و الگوی پنهان را پیدا کنید.",
    icon: <Wrench />,
    className: "lg:mt-10",
  },
  {
    id: "connect-workflows",
    title: "اشتراک گزارش",
    description: "نمای اجرایی برای تصمیم‌های سریع طراحی کنید.",
    icon: <Cable />,
    className: "lg:mt-4",
  },
];

const CardComponent = ({
  title,
  description,
  icon,
  className,
}: {
  title: string;
  description: string;
  icon: ReactNode;
  className?: string;
}) => {
  return (
    <Card
      className={cn(
        "flex w-full max-w-lg transform items-center gap-4 rounded-2xl p-6 text-start shadow-lg transition-transform hover:scale-105",
        className,
      )}
    >
      <div className="shrink-0 rounded-full bg-muted p-3.5">{icon}</div>
      <div className="min-w-0 font-semibold">
        <p className="text-balance break-words">{title}</p>
        <p className="text-pretty break-words text-muted-foreground">
          {description}
        </p>
      </div>
    </Card>
  );
};

interface Feature198Props {
  className?: string;
}

const Feature198 = ({ className }: Feature198Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("relative w-full min-w-0 overflow-hidden py-32", className)}
    >
      <div className="container min-w-0">
        <div className="relative flex w-full min-w-0 flex-col gap-12 py-12 md:gap-16 md:py-16 lg:py-20">
          <h2 className="mx-auto max-w-5xl text-center text-3xl font-medium text-balance sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl">
            <span className="text-muted-foreground">
              ابزارهای شما باید با کسب‌وکار شما سازگار شوند.{" "}
            </span>
            <span>
              داشبوردهای تعاملی به تیم‌ها اجازه می‌دهد سؤال جدید بپرسند بدون
              اینکه هر بار به تیم داده وابسته باشند.
            </span>
          </h2>

          <div className="mx-auto grid w-full min-w-0 max-w-6xl justify-items-center gap-4 sm:gap-6 lg:grid-cols-3 lg:items-start lg:gap-8">
            {DATA.map((card) => (
              <CardComponent
                key={card.id}
                title={card.title}
                description={card.description}
                icon={card.icon}
                className={card.className}
              />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature198 };