"use client";
/* eslint-disable @next/next/no-img-element */
import { useRef } from "react";
import type { Swiper as SwiperType } from "swiper";
import "swiper/css";
import "swiper/css/effect-cards";
import "swiper/css/navigation";
import "swiper/css/pagination";
import { Swiper, SwiperSlide } from "swiper/react";

import Title from "@/components/atoms/Title";
import { EffectCards, Navigation } from "swiper/modules";

const REVIEW_DATA = [
  {
    id: 1,
    quote:
      "Designo turned my home into the sanctuary I've always dreamed of. I highly endorse their services!",
    name: "Mrs. Moushumi Datta",
    profession: "Teacher",
    address: "Bangladesh Air Force Academy",
  },
  {
    id: 2,
    quote:
      "Their attention to detail and creative vision exceeded all my expectations. Truly world-class design!",
    name: "Mr. Rafiq Ahmed",
    profession: "Business Owner",
    address: "Gulshan, Dhaka",
  },
  {
    id: 3,
    quote:
      "Designo transformed our office space into an inspiring environment. Our team loves coming to work now!",
    name: "Ms. Fatema Akter",
    profession: "CEO",
    address: "Tech Solutions Ltd, Banani",
  },
];

interface ReviewCardProps {
  quote: string;
  name: string;
  profession: string;
  address: string;
}

const ReviewCard = ({ quote, name, profession, address }: ReviewCardProps) => {
  return (
    <>
      <div className="w-[clamp(280px,85vw,600px)] h-[clamp(180px,45vw,260px)] rounded-3xl bg-black border-[1px] border-[#DD577F] px-3 py-4 md:px-9 md:py-8">
        <div className="relative space-y-4 md:space-y-0">
          <p className="text-white font-creato text-[clamp(15px,2vw,18px)] md:text-[clamp(20px,2vw,22px)] xl:text-[22px] font-thin block">
            &ldquo;{quote}&rdquo;
          </p>
          <div className="text-[#A7A7A7] font-light space-y-1 md:space-y-2 md:pt-8 text-[clamp(13px,2vw,16px)] xl:text-[18px]">
            <p>{name}</p>
            <span className="p-0 md:space-y-1 text-[12px] xl:text-[14px]">
              <p>{profession}</p>
              <p>{address}</p>
            </span>
          </div>
        </div>
      </div>
    </>
  );
};

const ClientReviews = () => {
  const swiperRef = useRef<SwiperType | null>(null);

  return (
    <>
      <section className="md:min-h-dvh bg-gray-100 md:mb-48 overflow-x-hidden">
        <div className="text-center pt-20 md:pt-32 pb-36 px-4">
          <Title text="Hear From Our clients" />
        </div>
        <div className="mx-auto flex flex-col items-center justify-center pb-16 px-4">
          <Swiper
            effect={"cards"}
            grabCursor={true}
            modules={[EffectCards, Navigation]}
            onSwiper={(swiper) => {
              swiperRef.current = swiper;
            }}
            className="mySwiper w-full max-w-[100vw] md:max-w-[70dvw] overflow-visible"
          >
            {REVIEW_DATA.map((review) => (
              <SwiperSlide key={review.id}>
                <div className="flex justify-center">
                  <ReviewCard
                    quote={review.quote}
                    name={review.name}
                    profession={review.profession}
                    address={review.address}
                  />
                </div>
              </SwiperSlide>
            ))}
          </Swiper>

          {/* Custom Navigation Arrows */}
          <div className="flex justify-end w-full max-w-[clamp(280px,85vw,600px)] mt-8 gap-3 xl:ml-56 2xl:ml-80">
            <button
              onClick={() => swiperRef.current?.slidePrev()}
              className="w-[32px] h-[32px] md:w-[52px] md:h-[52px] flex items-center justify-center"
              aria-label="Previous slide"
            >
              <img
                src="/images/designo/review/arrow-left-disabled.png"
                alt="Previous"
                className="w-full h-full object-contain"
              />
            </button>
            <button
              onClick={() => swiperRef.current?.slideNext()}
              className="w-[32px] h-[32px] md:w-[52px] md:h-[52px] flex items-center justify-center"
              aria-label="Next slide"
            >
              <img
                src="/images/designo/review/arrow-right-disabled.png"
                alt="Next"
                className="w-full h-full object-contain"
              />
            </button>
          </div>
        </div>
      </section>
    </>
  );
};

export default ClientReviews;