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: "absolute top-0.5 cursor-pointer",
  },
  {
    id: "eliminate-clunky-tools",
    title: "تحلیل پیش‌بین",
    description:
      "ابعاد مختلف را بچرخانید و الگوی پنهان را پیدا کنید.",
    icon: <Wrench />,
    className:
      "absolute -end-4 top-5 cursor-pointer xl:end-5 xl:top-0",
  },
  {
    id: "connect-workflows",
    title: "اشتراک گزارش",
    description:
      "نمای اجرایی برای تصمیم‌های سریع طراحی کنید.",
    icon: <Cable />,
    className: "absolute bottom-2 start-[25%] cursor-pointer",
  },
];

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

interface Feature198Props {
  className?: string;
}

const Feature198 = ({ className }: Feature198Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="relative py-20 md:py-24 lg:py-28">
          <h2 className="mx-auto max-w-5xl text-center text-2xll font-medium text-balance sm:text-2xll lg:text-2xll xl:text-[85px]">
            <span className="text-muted-foreground">
              ابزارهای شما باید با کسب‌وکار شما سازگار شوند.{" "}
            </span>
            <span>داشبوردهای تعاملی به تیم‌ها اجازه می‌دهد سؤال جدید بپرسند بدون اینکه هر بار به تیم داده وابسته باشند.</span>
          </h2>

          <div className="lg:hidden">
            <div className="grid translate-y-4 justify-items-center gap-2">
              {DATA.map((card) => (
                <CardComponent
                  key={card.id}
                  title={card.title}
                  description={card.description}
                  icon={card.icon}
                />
              ))}
            </div>
          </div>

          <div className="absolute inset-0 max-lg:hidden">
            {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 };