reui-blocks/blocks/feature12.tsx

"use client";

import {
  ArrowDownToLine,
  ArrowUpDown,
  Code,
  Redo,
  Repeat,
  Scaling,
  Scan,
} from "lucide-react";
import { useEffect, useState } from "react";

import { Badge } from "@/components/ui/badge";
import { Card, CardContent } from "@/components/ui/card";
import type { CarouselApi } from "@/components/ui/carousel";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";
import { cn } from "@/lib/utils";

const slides = [
  {
    title: "سطح دسترسی",
    description:
      "گزارش سفارشی را بدون SQL بسازید و سریع منتشر کنید.",
    icon: <Code className="size-4" />,
  },
  {
    title: "تحلیل پیش‌بین",
    description:
      "ابعاد مختلف را بچرخانید و الگوی پنهان را پیدا کنید.",
    icon: <ArrowUpDown className="size-4" />,
  },
  {
    title: "اشتراک گزارش",
    description:
      "نمای اجرایی برای تصمیم‌های سریع طراحی کنید.",
    icon: <Redo className="size-4" />,
  },
  {
    title: "مدل داده",
    description:
      "داده پراکنده را در یک مدل واحد ساختاردهی کنید.",
    icon: <ArrowDownToLine className="size-4" />,
  },
  {
    title: "گزارش‌ساز",
    description:
      "گزارش سفارشی را بدون SQL بسازید و سریع منتشر کنید.",
    icon: <Repeat className="size-4" />,
  },
  {
    title: "Pivot تعاملی",
    description:
      "ابعاد مختلف را بچرخانید و الگوی پنهان را پیدا کنید.",
    icon: <Scan className="size-4" />,
  },
  {
    title: "داشبورد مدیریتی",
    description:
      "نمای اجرایی برای تصمیم‌های سریع طراحی کنید.",
    icon: <Scaling className="size-4" />,
  },
];

interface Feature12Props {
  className?: string;
}

const Feature12 = ({ className }: Feature12Props) => {
  const [api, setApi] = useState<CarouselApi>();
  const [progress, setProgress] = useState(1 / slides.length);
  const [currentSlide, setCurrentSlide] = useState(1);

  useEffect(() => {
    if (!api) {
      return;
    }

    const updateProgress = () => {
      setProgress(
        Math.max(1 / slides.length, Math.min(1, api.scrollProgress())),
      );
    };

    const updateCurrentSlide = () => {
      setCurrentSlide(api.selectedScrollSnap() + 1);
    };

    updateProgress();
    updateCurrentSlide();

    api.on("scroll", updateProgress);
    api.on("select", updateCurrentSlide);
    api.on("reInit", updateCurrentSlide);

    return () => {
      api.off("scroll", updateProgress);
      api.off("select", updateCurrentSlide);
      api.off("reInit", updateCurrentSlide);
    };
  }, [api]);

  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container max-w-7xl">
        <div className="mb-10 flex flex-col items-center gap-6 md:mb-20">
          <Badge variant="outline">داده سازمانی</Badge>
          <h2 className="mb-2 text-center text-3xl font-semibold lg:text-2xll">
            تصمیم استراتژیک را داده‌محور کنید
          </h2>
        </div>
        <Carousel
          className="w-full"
          setApi={setApi}
          opts={{
            align: "start",
            direction: "rtl",
          }}
        >
          <div className="mb-4 flex justify-between px-1 md:mb-5">
            <p className="font-medium">داشبوردهای تعاملی به تیم‌ها اجازه می‌دهد سؤال جدید بپرسند بدون اینکه هر بار به تیم داده وابسته باشند.</p>
            <div className="flex items-center gap-2">
              <div className="me-2 hidden items-center gap-3 text-xs text-muted-foreground md:flex">
                <span>
                  {currentSlide.toLocaleString("fa-IR").padStart(2, "۰")}
                </span>
                <div className="h-[2px] w-52 overflow-hidden rounded-full bg-muted">
                  <div
                    className="h-full origin-start bg-primary transition-transform"
                    style={{ transform: `scaleX(${progress})` }}
                  />
                </div>
                <span>
                  {slides.length.toLocaleString("fa-IR").padStart(2, "۰")}
                </span>
              </div>
              <CarouselPrevious className="static translate-y-0 rtl:rotate-180" />
              <CarouselNext className="static translate-y-0 rtl:rotate-180" />
            </div>
          </div>
          <CarouselContent>
            {slides.map((slide, index) => (
              <CarouselItem
                key={index}
                className="basis-full md:basis-1/2 lg:basis-1/3"
              >
                <div className="p-1">
                  <Card>
                    <CardContent className="flex flex-col justify-center p-6">
                      <div>
                        <span className="mb-5 flex size-8 items-center justify-center rounded-full bg-accent lg:size-10">
                          {slide.icon}
                        </span>
                        <p className="text-xl font-semibold md:text-xl lg:text-xl">
                          {slide.title}
                        </p>
                        <p className="pt-2 text-muted-foreground">
                          {slide.description}
                        </p>
                      </div>
                    </CardContent>
                  </Card>
                </div>
              </CarouselItem>
            ))}
          </CarouselContent>
        </Carousel>
      </div>
    </section>
  );
};

export { Feature12 };