"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 TEAM_MEMBERS = [
  {
    id: "member-1",
    src: "/block-media/shadcnblocks/block/lummi/person1.jpg",
    alt: "پرتره مریم رضایی",
    name: "مریم رضایی",
    role: "مدیر خلاق",
  },
  {
    id: "member-2",
    src: "/block-media/shadcnblocks/block/lummi/person2.jpg",
    alt: "پرتره امیر حسینی",
    name: "امیر حسینی",
    role: "توسعه‌دهنده ارشد",
  },
  {
    id: "member-3",
    src: "/block-media/shadcnblocks/block/lummi/person3.jpg",
    alt: "پرتره سارا احمدی",
    name: "سارا احمدی",
    role: "مدیر پروژه",
  },
  {
    id: "member-4",
    src: "/block-media/shadcnblocks/block/lummi/random11.jpg",
    alt: "پرتره کامران نظری",
    name: "کامران نظری",
    role: "طراح تجربه کاربری",
  },
  {
    id: "member-5",
    src: "/block-media/shadcnblocks/block/lummi/person2.jpg",
    alt: "پرتره لیلا محمدی",
    name: "لیلا محمدی",
    role: "متخصص بازاریابی",
  },
];

interface Gallery27Props {
  className?: string;
}

const Gallery27 = ({ className }: Gallery27Props) => {
  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="flex items-end justify-between gap-4">
          <div>
            <h1 className="font-calSans text-start text-2xll">
              تیم پشت موفقیت ما
            </h1>
            <p className="mt-3 max-w-xl text-start text-muted-foreground">
              گروهی از متخصصان خلاق و باانگیزه که با همکاری و تعهد، پروژه‌های
              باکیفیت را از ایده تا اجرا پیش می‌برند.
            </p>
          </div>
          <div className="flex shrink-0 gap-2">
            <Button
              size="icon"
              variant="default"
              className="rounded-none"
              disabled={!canScrollPrev}
              onClick={() => carouselApi?.scrollPrev()}
            >
              <ArrowRight className="size-4" />
              <span className="sr-only">اسلاید قبلی</span>
            </Button>
            <Button
              size="icon"
              variant="default"
              className="rounded-none"
              disabled={!canScrollNext}
              onClick={() => carouselApi?.scrollNext()}
            >
              <ArrowLeft className="size-4" />
              <span className="sr-only">اسلاید بعدی</span>
            </Button>
          </div>
        </div>
        <Carousel
          dir="rtl"
          setApi={setCarouselApi}
          opts={{
            align: "start",
            direction: "rtl",
            loop: true,
          }}
          className="relative w-full pt-15"
        >
          <CarouselContent className="-ms-4 me-0">
            {TEAM_MEMBERS.map((member) => (
              <CarouselItem
                key={member.id}
                className="ps-4 pe-0 md:basis-1/2 lg:basis-1/4"
              >
                <div className="group text-start">
                  <img
                    src={member.src}
                    alt={member.alt}
                    className="h-92 w-full object-cover transition-all duration-300 group-hover:translate-y-[-10px]"
                  />
                  <h3 className="mt-4 text-xl font-semibold">{member.name}</h3>
                  <p className="text-muted-foreground">{member.role}</p>
                </div>
              </CarouselItem>
            ))}
          </CarouselContent>
        </Carousel>
      </div>
    </section>
  );
};

export { Gallery27 };