"use client";
import Image from "next/image";
import React from "react";
import { Autoplay } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";

import "swiper/css";
import "swiper/css/pagination";
import { CardWrwpper } from "../../shared/card";
import cupImg from "@/public/assets/img/Cup.png";
import { useTranslations } from "next-intl"; // استخدم useTranslations للـ client side

function SliderArea({ areas, locale }: { areas: any[]; locale: string }) {
  const t = useTranslations("Header"); // استخدم useTranslations للـ client side

  return (
    <div dir="ltr">
      <Swiper
        // slidesPerView={4}
        // spaceBetween={10}
        // centeredSlides={true}
        autoplay={{
          delay: 2500,
          disableOnInteraction: false,
        }}
        pagination={{
          clickable: true,
        }}
        dir="ltr"
        modules={[Autoplay]}
        breakpoints={{
          // When the viewport width is >= 320px
          320: {
            slidesPerView: 1,
            spaceBetween: 10,
          },
          // When the viewport width is >= 640px
          640: {
            slidesPerView: 2,
            spaceBetween: 10,
          },
          // When the viewport width is >= 768px
          768: {
            slidesPerView: 3,
            spaceBetween: 20,
          },
          // When the viewport width is >= 1024px
          // 1024: {
          //     slidesPerView: 4,
          //     spaceBetween: 30,
          // },
        }}
        className="events "
      >
        {areas?.map((area, index) => (
          <SwiperSlide key={area?.id}>
            <CardWrwpper
              imgUrl={area?.image?.original_url}
              className="!h-[253px]"
              locale={locale}
            >
              <div className="flex flex-col gap-4 justify-end z-40 p-4 absolute top-0 left-0 h-full">
                <div className="flex  gap-2 ">
                  <div className="flex flex-col gap-1 translate-y-[calc(100%-40px)] group-hover:translate-y-[-8px] transition-all duration-500">
                    <div className="flex gap-2 w-full">
                      <Image
                        src={cupImg}
                        width={27}
                        height={37}
                        alt="cup"
                        className="!w-[27px] !h-[37px] "
                      />
                      <div>
                        <h5 className="text-6 font-medium duration-500">
                          {area?.name}
                        </h5>
                        <h5 className="text-[16px] duration-500">
                          {area?.products_count} {t("property")}
                        </h5>
                        <p className="mt-2 duration-500">
                          {area?.description}{" "}
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </CardWrwpper>

            {/* <div className="flex   w-full h-full flex-col gap-4">
                    <Image
                        width={305}
                        height={234}
                        src={area?.image?.original_url}
                        className="!w-full h-[234px] "
                        alt=""
                    />
                    <span>{area?.title}</span>
                </div> */}
          </SwiperSlide>
        ))}
      </Swiper>
    </div>
  );
}

export default SliderArea;