reui-blocks/blocks/gallery11.tsx

"use client";

import { 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";

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

const DATA: DataItem[] = [
  {
    id: "item-1",
    title: "کشف آلپ",
    description: "مناظری بی‌نظیر",
    href: "#",
    image:
      "/block-media/shadcnblocks/block/placeholder-3.svg",
  },
  {
    id: "item-2",
    title: "بهشت استوایی",
    description: "استراحت در سواحل بکر",
    href: "#",
    image:
      "/block-media/shadcnblocks/block/placeholder-2.svg",
  },
  {
    id: "item-3",
    title: "شگفتی‌های فرهنگی",
    description: "غوطه‌وری در تاریخ غنی",
    href: "#",
    image:
      "/block-media/shadcnblocks/block/placeholder-1.svg",
  },
  {
    id: "item-4",
    title: "مردم دل‌انگیز",
    description: "آشنایی با افراد شگفت‌انگیز جهان",
    href: "#",
    image:
      "/block-media/shadcnblocks/block/placeholder-4.svg",
  },
];

interface Gallery11Props {
  className?: string;
}

const Gallery11 = ({ className }: Gallery11Props) => {
  const [carouselApi, setCarouselApi] = useState<CarouselApi>();

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

  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="my-8 flex items-center justify-between px-4 lg:px-10">
        <h2 className="text-start text-xl md:text-3xl lg:text-xl">
          کشف مقاصد سفر
        </h2>
        <Button variant="outline" className="rounded-full" asChild>
          <a href="#">
            مشاهده همه
            <ArrowRight className="ms-2 size-4 rtl:rotate-180" />
          </a>
        </Button>
      </div>

      <div className="relative w-full overflow-hidden px-4 lg:px-10">
        <Carousel
          dir="rtl"
          setApi={setCarouselApi}
          opts={{
            align: "start",
            direction: "rtl",
            dragFree: true,
          }}
        >
          <CarouselContent className="-ms-4 me-0">
            {DATA.map((item) => (
              <CarouselItem
                key={item.id}
                className="min-w-[350px] flex-1 cursor-pointer ps-4 pe-0"
              >
                <a href={item.href} className="group">
                  <div className="relative overflow-hidden rounded-2xl">
                    <img
                      src={item.image}
                      alt={item.title}
                      className="aspect-3/4 h-full w-full object-cover object-center transition-all duration-500 ease-out group-hover:scale-105"
                    />
                    <div className="absolute start-6 bottom-6 max-w-[90%] min-w-[75%] rounded-2xl bg-background px-6 py-4 text-start transition-all duration-500 ease-out group-hover:bg-black group-hover:text-white">
                      <div className="flex flex-col items-start">
                        <h5 className="text-sm font-semibold md:text-lg">
                          {item.title}
                        </h5>
                        <div className="flex items-center gap-4">
                          <h4 className="text-sm font-bold md:text-lg lg:text-xl">
                            {item.description}
                          </h4>
                          <ArrowRight className="size-4 shrink-0 transition-transform group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1" />
                        </div>
                      </div>
                    </div>
                  </div>
                </a>
              </CarouselItem>
            ))}
          </CarouselContent>
        </Carousel>
      </div>
    </section>
  );
};

export { Gallery11 };