reui-blocks/blocks/gallery12.tsx

"use client";

import { ArrowLeft, ArrowRight, Sparkles } from "lucide-react";
import { useEffect, useState } from "react";

import { Button } from "@/components/ui/button";
import type { CarouselApi } from "@/components/ui/carousel";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
} from "@/components/ui/carousel";
import { cn } from "@/lib/utils";

interface DataItem {
  id: string;
  title: string;
  description: string;
  href: string;
  image: string;
}

const DATA: DataItem[] = [
  {
    id: "feature-1",
    title: "دستیار هوشمند",
    description:
      "با مدل‌های زبانی پیشرفته، پرسش‌های پیچیده را پردازش می‌کند، وظایف را خودکار می‌کند و پاسخ‌های هوشمند با دقت بالا ارائه می‌دهد.",
    href: "#",
    image:
      "/block-media/shadcnblocks/block/block-2.svg",
  },
  {
    id: "feature-2",
    title: "تحلیل داده",
    description:
      "داده‌های خام را با الگوریتم‌های یادگیری ماشین و تحلیل پیش‌بینی‌کننده به بینش‌های عملی برای تصمیم‌گیری آگاهانه تبدیل کنید.",
    href: "#",
    image:
      "/block-media/shadcnblocks/block/block-1.svg",
  },
  {
    id: "feature-3",
    title: "خودکارسازی فرایند",
    description:
      "گردش‌کارها را ساده کنید و وظایف تکراری را با خودکارسازی هوشمند انجام دهید؛ کارایی بیشتر و خطای کمتر.",
    href: "#",
    image:
      "/block-media/shadcnblocks/block/block-3.svg",
  },
  {
    id: "feature-4",
    title: "پایگاه دانش",
    description:
      "اطلاعات جامع را با پایگاه دانش مبتنی بر هوش مصنوعی مدیریت کنید که از هر تعامل یاد می‌گیرد و بهبود می‌یابد.",
    href: "#",
    image:
      "/block-media/shadcnblocks/block/block-4.svg",
  },
  {
    id: "feature-5",
    title: "یکپارچه‌سازی اتصال هوشمند",
    description:
      "با چارچوب اتصال هوشمند قدرتمند ما، بدون درز با سیستم‌های موجود یکپارچه شوید و تبادل داده و گسترش قابلیت‌ها را ساده کنید.",
    href: "#",
    image:
      "/block-media/shadcnblocks/block/block-5.svg",
  },
  {
    id: "feature-6",
    title: "امنیت و انطباق",
    description:
      "امنیت داده و رعایت استانداردهای صنعتی را با اقدامات و پروتکل‌های امنیتی جامع ما تضمین کنید.",
    href: "#",
    image:
      "/block-media/shadcnblocks/block/block-6.svg",
  },
  {
    id: "feature-7",
    title: "داشبوردهای قابل سفارشی‌سازی",
    description:
      "داشبوردها را برای نمایش شاخص‌های کلیدی و عملکرد بسازید و سفارشی کنید؛ بینش بلادرنگ در یک نگاه.",
    href: "#",
    image:
      "/block-media/shadcnblocks/block/block-4.svg",
  },
  {
    id: "feature-8",
    title: "ابزارهای همکاری",
    description:
      "همکاری تیم را با ابزارهای یکپارچه ارتباط، مدیریت پروژه و اشتراک‌گذاری فایل تقویت کنید.",
    href: "#",
    image:
      "/block-media/shadcnblocks/block/block-1.svg",
  },
];

interface Gallery12Props {
  className?: string;
}

const Gallery12 = ({ className }: Gallery12Props) => {
  const [carouselApi, setCarouselApi] = useState<CarouselApi>();
  const [canScrollPrev, setCanScrollPrev] = useState(false);
  const [canScrollNext, setCanScrollNext] = useState(false);

  useEffect(() => {
    if (!carouselApi) {
      return;
    }
    const updateSelection = () => {
      setCanScrollPrev(carouselApi.canScrollPrev());
      setCanScrollNext(carouselApi.canScrollNext());
    };
    updateSelection();
    carouselApi.on("select", updateSelection);
    return () => {
      carouselApi.off("select", updateSelection);
    };
  }, [carouselApi]);

  useEffect(() => {
    if (!carouselApi) {
      return;
    }
    carouselApi.reInit();
  }, [carouselApi]);

  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mb-12 flex flex-col items-center text-center">
          <h2 className="text-3xl font-medium tracking-tight md:text-xl lg:text-2xll">
            ویژگی‌های ما
          </h2>
          <p className="mt-4 max-w-xl text-lg text-muted-foreground">
            مجموعه‌ای از قابلیت‌های هوش مصنوعی برای خودکارسازی، تحلیل و رشد
            کسب‌وکار شما.
          </p>
        </div>

        <div className="w-full">
          <Carousel
            dir="rtl"
            setApi={setCarouselApi}
            opts={{
              align: "start",
              direction: "rtl",
              breakpoints: {
                "(max-width: 768px)": {
                  active: true,
                  dragFree: true,
                },
                "(min-width: 768px)": {
                  active: true,
                },
                "(min-width: 1024px)": {
                  active: true,
                },
              },
            }}
          >
            <CarouselContent className="-ms-4 me-0">
              {DATA.map((item) => (
                <CarouselItem
                  key={item.id}
                  className="ps-4 pe-0 sm:basis-1/2 md:basis-1/3 xl:basis-1/4"
                >
                  <div className="group flex h-full flex-col justify-between rounded-xl border bg-muted">
                    <div className="flex aspect-square items-center justify-center overflow-clip rounded-t-xl">
                      <img
                        src={item.image}
                        alt={item.title}
                        className="h-48 w-48 object-cover object-center md:h-36 md:w-36"
                      />
                    </div>

                    <div className="flex h-full flex-col justify-between px-8">
                      <div className="my-8 text-start">
                        <div className="mb-2 line-clamp-3 text-lg font-medium break-words md:text-xl lg:text-xl">
                          {item.title}
                        </div>
                        <div className="line-clamp-2 text-sm text-muted-foreground md:text-base">
                          {item.description}
                        </div>
                      </div>
                    </div>
                  </div>
                </CarouselItem>
              ))}
            </CarouselContent>
          </Carousel>
        </div>

        <div className="mt-8 flex flex-row items-center justify-between gap-4 md:flex-row">
          <Button
            variant="outline"
            size="icon"
            onClick={() => {
              carouselApi?.scrollPrev();
            }}
            disabled={!canScrollPrev}
            className="rounded-full disabled:pointer-events-auto md:ms-12"
          >
            <ArrowRight className="size-4" />
            <span className="sr-only">اسلاید قبلی</span>
          </Button>

          <div className="flex flex-col items-center gap-4 md:flex-row">
            <Button size="lg" className="font-bold shadow-lg">
              <Sparkles className="size-4" />
              دانلود اکنون
            </Button>
          </div>

          <Button
            variant="outline"
            size="icon"
            onClick={() => {
              carouselApi?.scrollNext();
            }}
            disabled={!canScrollNext}
            className="rounded-full disabled:pointer-events-auto md:me-12"
          >
            <ArrowLeft className="size-4" />
            <span className="sr-only">اسلاید بعدی</span>
          </Button>
        </div>
      </div>
    </section>
  );
};

export { Gallery12 };