"use client";

import { ArrowRight } from "lucide-react";
import { useState } from "react";

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

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

interface Feature78Props {
  className?: string;
}

const Feature78 = ({ className }: Feature78Props) => {
  const [selection, setSelection] = useState(features[0].id);
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="flex flex-col">
        <div className="container">
          <div className="text-right lg:max-w-3xl">
            <h2 className="mb-2 text-xl font-semibold md:text-xl">
              تصمیم استراتژیک را داده‌محور کنید
            </h2>
            <a
              href="#"
              className="group flex items-center text-xs font-medium md:text-base lg:text-lg"
            >
              تحلیل پیشرفته
              <ArrowRight className="ms-2 size-4 transition-transform group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1" />
            </a>
          </div>
        </div>
        <div>
          <Tabs dir="rtl" value={selection} onValueChange={setSelection}>
            <div className="relative mt-6">
              <div
                dir="rtl"
                className="flex justify-start overflow-x-auto overflow-y-hidden"
              >
                <div className="container min-w-fit">
                  <TabsList>
                    {features.map((feature) => (
                      <TabsTrigger key={feature.id} value={feature.id}>
                        {feature.tabLabel}
                      </TabsTrigger>
                    ))}
                  </TabsList>
                </div>
                <div className="pointer-events-none absolute inset-0 bg-[linear-gradient(to_left,var(--color-background)_0%,transparent_10%,transparent_90%,var(--color-background)_100%)] md:hidden" />
              </div>
            </div>
            <div className="container">
              {features.map((feature) => (
                <TabsContent key={feature.id} value={feature.id}>
                  <div
                    dir="rtl"
                    className="mt-12 flex flex-col md:grid md:grid-cols-2 md:gap-6 lg:gap-8"
                  >
                    <div
                      className="flex flex-col items-start justify-center py-8 text-right md:px-8 md:py-10 lg:px-10 lg:py-12"
                    >
                      <h3 className="mb-3 text-xl font-semibold md:mb-4 md:text-xl lg:mb-6">
                        {feature.title}
                      </h3>
                      <p className="text-muted-foreground lg:text-lg">
                        {feature.description}
                      </p>
                    </div>
                    <div
                      className="order-first overflow-clip rounded-3xl md:order-2 md:min-h-[24rem] lg:min-h-[28rem] xl:min-h-[32rem]"
                    >
                      <img
                        src={feature.image}
                        alt={`نمای ${feature.title}`}
                        className="aspect-16/9 h-full w-full object-cover object-center"
                      />
                    </div>
                  </div>
                </TabsContent>
              ))}
            </div>
          </Tabs>
        </div>
      </div>
    </section>
  );
};

export { Feature78 };