"use client";

import { useState } from "react";

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

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

interface Feature54Props {
  className?: string;
}

const Feature54 = ({ className }: Feature54Props) => {
  const [selection, setSelection] = useState("feature-5");
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="flex flex-col items-center md:gap-y-4 lg:px-16">
        <div className="container flex flex-col items-center">
          <h3 className="mb-3 text-center text-3xl font-semibold text-pretty md:mb-4 md:text-xl lg:mb-6 lg:max-w-3xl lg:text-2xll">
            سطح دسترسی
          </h3>
        </div>
        <div className="w-full text-center">
          <Tabs value={selection} onValueChange={setSelection}>
            <div className="relative">
              <div className="container mb-6 hidden min-w-fit flex-col items-center md:flex lg:mb-8 lg:max-w-5xl">
                <TabsList className="gap-x-2">
                  {features.map((feature) => (
                    <TabsTrigger key={feature.id} value={feature.id}>
                      {feature.title}
                    </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 className="container w-full lg:max-w-5xl">
              {features.map((feature) => (
                <TabsContent key={feature.id} value={feature.id}>
                  <div className="">
                    <div className="aspect-[1.67] w-full overflow-hidden rounded-lg border border-border bg-accent">
                      <img
                        src={feature.image}
                        alt={`نمای ${feature.title}`}
                        className="h-full w-full object-cover object-center"
                      />
                    </div>
                    <div
                      dir="rtl"
                      className="hidden grid-cols-3 gap-6 py-6 md:grid"
                    >
                      {feature.subfeatures.map((subfeature) => (
                        <div
                          key={subfeature.id}
                          className="flex flex-col items-start text-right"
                        >
                          <p className="mb-2 text-xs font-semibold">
                            {subfeature.title}
                          </p>
                          <p className="mb-8 text-xs text-muted-foreground">
                            {subfeature.description}
                          </p>
                        </div>
                      ))}
                    </div>
                  </div>
                </TabsContent>
              ))}
            </div>
            <div className="flex justify-center py-3 md:hidden">
              {features.map((feature) => (
                <Button
                  key={feature.id}
                  variant="ghost"
                  size="sm"
                  aria-label={feature.title}
                  onClick={() => {
                    setSelection(feature.id);
                  }}
                >
                  <div
                    className={`size-2 rounded-full ${feature.id === selection ? "bg-primary" : "bg-input"}`}
                  />
                </Button>
              ))}
            </div>
          </Tabs>
        </div>
      </div>
    </section>
  );
};

export { Feature54 };