reui-blocks/blocks/gallery28.tsx

"use client";

import { ArrowLeft, ArrowRight } 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";

const IMAGES = [
  {
    id: "interior-1",
    src: "/block-media/shadcnblocks/block/photos/alex-tyson-2Fv_otxbGtg-unsplash.jpg",
    alt: "فضای داخلی مدرن با نور طبیعی",
  },
  {
    id: "interior-2",
    src: "/block-media/shadcnblocks/block/photos/jason-leung-6uoj7DL6BFk-unsplash.jpg",
    alt: "طراحی داخلی مینیمال و آرام",
  },
  {
    id: "interior-3",
    src: "/block-media/shadcnblocks/block/photos/jonathan-borba-UisC7KLAWjs-unsplash.jpg",
    alt: "اتاق نشیمن با دکوراسیون گرم",
  },
  {
    id: "interior-4",
    src: "/block-media/shadcnblocks/block/photos/jean-philippe-delberghe-fnIIuaEHvII-unsplash.jpg",
    alt: "فضای داخلی با معماری مدرن",
  },
  {
    id: "interior-5",
    src: "/block-media/shadcnblocks/block/photos/jonathan-borba-YdomJdFdbDo-unsplash.jpg",
    alt: "آشپزخانه با طراحی معاصر",
  },
  {
    id: "interior-6",
    src: "/block-media/shadcnblocks/block/photos/jose-angel-rios-ux9cu6FLsFE-unsplash.jpg",
    alt: "فضای نشیمن با نورپردازی نرم",
  },
  {
    id: "interior-7",
    src: "/block-media/shadcnblocks/block/photos/zhao-yangyang-4uMRVFnJcP4-unsplash.jpg",
    alt: "طراحی داخلی لوکس و مرتب",
  },
];

interface Gallery28Props {
  className?: string;
}

const Gallery28 = ({ className }: Gallery28Props) => {
  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">
        <h2 className="mb-4 text-center text-xl font-semibold">
          فضاهای داخلی زیبا
        </h2>
        <p className="text-center text-sm text-muted-foreground">
          مجموعه‌ای گزیده از طراحی‌های داخلی چشم‌نواز را کاوش کنید.
          <br />
          هر فضا با طراحی آگاهانه و توجه به جزئیات، تجربه کاربری بهینه‌ای دارد.
        </p>
        <div className="relative mt-10">
          <Carousel
            dir="rtl"
            setApi={setCarouselApi}
            opts={{
              align: "start",
              direction: "rtl",
              loop: true,
            }}
            className="mx-auto w-full max-w-6xl"
          >
            <CarouselContent
              className="-ms-4 me-0"
              style={{
                backfaceVisibility: "hidden",
              }}
            >
              {IMAGES.map((image) => (
                <CarouselItem
                  key={image.id}
                  className="basis-1/2 ps-4 pe-0"
                >
                  <img
                    src={image.src}
                    alt={image.alt}
                    className="aspect-[3.8/5] w-full rounded-xl object-cover"
                  />
                </CarouselItem>
              ))}
            </CarouselContent>
          </Carousel>
          <Button
            size="icon"
            variant="ghost"
            disabled={!canScrollPrev}
            className="absolute start-5 top-1/2 z-10 scale-120 -translate-y-1/2 border-none bg-black/30 text-white hover:bg-black/50 hover:text-white dark:bg-black/30 dark:hover:bg-black/50"
            onClick={() => carouselApi?.scrollPrev()}
          >
            <ArrowRight className="size-4" />
            <span className="sr-only">اسلاید قبلی</span>
          </Button>
          <Button
            size="icon"
            variant="ghost"
            disabled={!canScrollNext}
            className="absolute end-5 top-1/2 z-10 scale-120 -translate-y-1/2 border-none bg-black/30 text-white hover:bg-black/50 hover:text-white dark:bg-black/30 dark:hover:bg-black/50"
            onClick={() => carouselApi?.scrollNext()}
          >
            <ArrowLeft className="size-4" />
            <span className="sr-only">اسلاید بعدی</span>
          </Button>
        </div>
      </div>
    </section>
  );
};

export { Gallery28 };