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

const caseStudies = [
  {
    featured: true,
    title:
      "سطح دسترسی",
    description:
      "گزارش سفارشی را بدون SQL بسازید و سریع منتشر کنید.",
    linkText: "داده سازمانی",
    href: "#",
  },
  {
    featured: false,
    title: "تحلیل پیش‌بین",
    linkText: "هوش تجاری",
    href: "#",
  },
  {
    featured: false,
    title: "اشتراک گزارش",
    linkText: "گزارش‌گیری",
    href: "#",
  },
  {
    featured: false,
    title: "مدل داده",
    linkText: "تحلیل پیشرفته",
    href: "#",
  },
  {
    featured: false,
    title: "گزارش‌ساز",
    linkText: "داده سازمانی",
    href: "#",
  },
  {
    featured: false,
    title: "Pivot تعاملی",
    linkText: "هوش تجاری",
    href: "#",
  },
];

interface Feature36Props {
  className?: string;
}

const Feature36 = ({ className }: Feature36Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="grid grid-cols-1 gap-5 lg:grid-cols-3">
          {caseStudies.map((study, index) => (
            <a
              key={index}
              className={cn(
                "group",
                study.featured && "lg:col-span-2 lg:row-span-2",
              )}
              href={study.href}
            >
              <Card
                className={cn(
                  "h-full items-start border border-transparent bg-accent p-12 hover:cursor-pointer hover:border-primary",
                  study.featured && "lg:p-20",
                )}
              >
                <div className="flex flex-col gap-8">
                  {study.featured && (
                    <Badge className="w-fit">گزارش‌گیری</Badge>
                  )}
                  <div className="flex flex-col gap-6">
                    <p
                      className={cn(
                        "text-muted-foreground",
                        study.featured && "text-base lg:text-lg lg:font-medium",
                      )}
                    >
                      داشبوردهای تعاملی به تیم‌ها اجازه می‌دهد سؤال جدید بپرسند بدون اینکه هر بار به تیم داده وابسته باشند.
                    </p>
                    <h3
                      className={cn(
                        "text-xl font-medium",
                        study.featured && "lg:text-2xll",
                      )}
                    >
                      {study.title}
                    </h3>
                    {study.description && (
                      <p className="text-muted-foreground lg:text-lg lg:font-medium">
                        {study.description}
                      </p>
                    )}
                  </div>
                  <p className="font-medium group-hover:underline">
                    {study.linkText}
                  </p>
                </div>
              </Card>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature36 };