reui-blocks/blocks/gallery13.tsx

"use client";

import type { LucideIcon } from "lucide-react";
import { ArrowLeft, ArrowRight, Palette, Sparkles, Star } from "lucide-react";
import { startTransition, 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 {
  src: string;
  title: string;
  description: string;
  icon: LucideIcon;
}

const DATA: DataItem[] = [
  {
    src: "/block-media/shadcnblocks/block/placeholder-1.svg",
    title: "طراحی ظریف",
    description:
      "طراحی‌هایی زیبا و دقیق که استایل و کارایی را در هم می‌آمیزند کشف کنید.",
    icon: Palette,
  },
  {
    src: "/block-media/shadcnblocks/block/placeholder-2.svg",
    title: "کیفیت برتر",
    description:
      "بهترین مواد و کیفیت ساخت را در هر قطعه تجربه کنید.",
    icon: Star,
  },
  {
    src: "/block-media/shadcnblocks/block/placeholder-3.svg",
    title: "زیبایی‌شناسی معاصر",
    description:
      "با مجموعه‌های معاصر و ترند از دیگران پیشی بگیرید.",
    icon: Sparkles,
  },
];

interface Gallery13Props {
  className?: string;
}

const Gallery13 = ({ className }: Gallery13Props) => {
  const [api, setApi] = useState<CarouselApi>();
  const [activeIndex, setActiveIndex] = useState(0);
  const [canScrollPrev, setCanScrollPrev] = useState(false);
  const [canScrollNext, setCanScrollNext] = useState(false);

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

    const updateSelection = () => {
      startTransition(() => {
        setActiveIndex(api.selectedScrollSnap());
        setCanScrollPrev(api.canScrollPrev());
        setCanScrollNext(api.canScrollNext());
      });
    };

    updateSelection();
    api.on("select", updateSelection);

    return () => {
      api.off("select", updateSelection);
    };
  }, [api]);

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

  const ActiveIcon = DATA[activeIndex].icon;

  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <Carousel
          dir="rtl"
          setApi={setApi}
          opts={{
            align: "start",
            direction: "rtl",
          }}
          className="w-full"
        >
          <div className="grid grid-cols-1 gap-6 md:grid-cols-5">
            <div className="md:col-span-2">
              <div className="flex h-full flex-col gap-8 rounded-lg bg-muted px-8 py-16 text-start">
                <div className="flex size-12 items-center justify-center rounded-lg bg-background shadow-lg ring-1 ring-gray-200">
                  <ActiveIcon className="size-6" />
                </div>
                <div className="flex flex-col gap-4">
                  <h2 className="text-3xl font-medium">
                    {DATA[activeIndex].title}
                  </h2>
                  <p className="mb-4 text-base text-muted-foreground">
                    {DATA[activeIndex].description}
                  </p>
                  <div className="flex items-center gap-4">
                    <Button
                      type="button"
                      size="icon"
                      variant="outline"
                      className="relative size-12 translate-none touch-manipulation transition-all duration-200 hover:bg-black hover:text-white"
                      disabled={!canScrollPrev}
                      onClick={() => api?.scrollPrev()}
                    >
                      <ArrowRight className="size-4" />
                      <span className="sr-only">اسلاید قبلی</span>
                    </Button>
                    <Button
                      type="button"
                      size="icon"
                      variant="outline"
                      className="relative size-12 translate-none touch-manipulation transition-all duration-200 hover:bg-black hover:text-white"
                      disabled={!canScrollNext}
                      onClick={() => api?.scrollNext()}
                    >
                      <ArrowLeft className="size-4" />
                      <span className="sr-only">اسلاید بعدی</span>
                    </Button>
                  </div>
                </div>
              </div>
            </div>

            <div className="h-full md:col-span-3">
              <CarouselContent className="-ms-4 me-0">
                {DATA.map((image, index) => (
                  <CarouselItem
                    key={index}
                    className="h-full basis-full ps-4 pe-0"
                  >
                    <div className="aspect-2/1 h-full w-full">
                      <img
                        src={image.src}
                        alt={image.title}
                        className="h-full w-full rounded-lg object-cover"
                      />
                    </div>
                  </CarouselItem>
                ))}
              </CarouselContent>
            </div>
          </div>
        </Carousel>
      </div>
    </section>
  );
};

export { Gallery13 };