"use client";

import { useState } from "react";

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { cn } from "@/lib/utils";

const integrations = [
  {
    id: "1",
    image: "/block-media/shadcnblocks/block/block-1.svg",
    title: "گزارش‌ساز",
    description:
      "گزارش سفارشی را بدون SQL بسازید و سریع منتشر کنید.",
    imageAlt: "گزارش‌ساز",
  },
  {
    id: "2",
    image: "/block-media/shadcnblocks/block/block-2.svg",
    title: "Pivot تعاملی",
    description:
      "ابعاد مختلف را بچرخانید و الگوی پنهان را پیدا کنید.",
    imageAlt: "تحلیل داده سازمان",
  },
  {
    id: "3",
    image: "/block-media/shadcnblocks/block/block-3.svg",
    title: "داشبورد مدیریتی",
    description:
      "نمای اجرایی برای تصمیم‌های سریع طراحی کنید.",
    imageAlt: "داشبورد هوش تجاری",
  },
];

interface Feature156Props {
  className?: string;
}

const Feature156 = ({ className }: Feature156Props) => {
  const [cardNumber, setCardNumber] = useState(0);

  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("relative overflow-hidden py-24 lg:py-32", className)}
    >
      <div className="absolute inset-0 -z-10">
        <div className="absolute inset-0 h-full w-full bg-[linear-gradient(to_left,#8882_1px,transparent_1px),linear-gradient(to_bottom,#8882_1px,transparent_1px)] bg-size-[2rem_2rem]" />
        <div className="absolute inset-0 bg-[radial-gradient(circle_800px_at_50%_50%,transparent,white)]" />
      </div>

      <div className="relative container">
        <div className="mb-16 flex flex-col items-center gap-8">
          <h1 className="max-w-3xl text-center text-xl font-bold tracking-tight text-balance md:text-2xll lg:text-2xll">
            تصمیم استراتژیک را داده‌محور کنید
          </h1>
        </div>
        <Tabs dir="rtl" defaultValue={cardNumber.toString()} className="space-y-16">
          <div className="relative flex h-[480px] items-center justify-center overflow-hidden rounded-2xl bg-muted backdrop-blur-sm">
            {integrations.map((item, index) => (
              <TabsContent
                value={index.toString()}
                key={item.id}
                className="absolute inset-0 h-full w-full"
              >
                <div className="flex h-full w-full items-center justify-center p-8">
                  <img
                    src={item.image}
                    alt={item.imageAlt}
                    className="h-auto max-h-full w-auto max-w-full object-contain dark:invert"
                  />
                </div>
              </TabsContent>
            ))}
          </div>
          <TabsList className="grid !h-auto w-full grid-cols-1 gap-8 bg-transparent p-0 lg:grid-cols-3 lg:gap-14">
            {integrations.map((item, index) => (
              <TabsTrigger
                value={index.toString()}
                key={item.id}
                className="group flex !h-auto flex-col items-start rounded-xl border border-muted bg-background/50 p-8 text-right whitespace-normal shadow-sm transition-all hover:bg-muted/50 hover:shadow-md data-[state=active]:border-primary/20 data-[state=active]:bg-muted/50 data-[state=active]:shadow-md"
                onClick={() => setCardNumber(index)}
              >
                <div className="mb-4 flex h-10 w-10 items-center justify-center rounded-full bg-primary/10 font-mono text-primary group-hover:bg-primary/20 group-data-[state=active]:bg-primary/20">
                  {(index + 1).toLocaleString("fa-IR")}
                </div>
                <h3 className="mb-3 text-xl font-semibold tracking-tight text-foreground/90 group-hover:text-foreground group-data-[state=active]:text-foreground">
                  {item.title}
                </h3>
                <p className="text-right text-sm text-pretty text-muted-foreground/80 group-hover:text-muted-foreground group-data-[state=active]:text-muted-foreground">
                  {item.description}
                </p>
              </TabsTrigger>
            ))}
          </TabsList>
        </Tabs>
      </div>
    </section>
  );
};

export { Feature156 };