"use client";
import useEmblaCarousel from "embla-carousel-react";
import { cn } from "@/lib/utils";
import Image from "next/image";

type TestimonialCarouselProps = {
  items: any[];
};

type TestimonialCardProps = {
  quote: string;
  name: string;
  role: string;
  alt?: string;
  className?: string;
  src: string;
  followers: string;
};

export function TestimonialCarousel({ items }: TestimonialCarouselProps) {
  const [emblaRef] = useEmblaCarousel({
    loop: true,
    align: "center",
    dragFree: true,
    containScroll: "trimSnaps",
  });

  return (
    <div ref={emblaRef} className="">
      <div className="flex">
       {items.map((item, i) => (
      <div
        key={i}
        // className="flex-[0_0_45%] shrink-0 px-3"
        className={cn(
          "md:flex-[0_0_45%] flex-[0_0_90%] shrink-0 px-3 md:transition-transform md:duration-500 md:ease-out",
          i % 2 === 1 && "md:translate-y-40" )}
      >
        <TestimonialCard {...item} />
      </div>
    ))}
      </div>
    </div>
  );
}

export function TestimonialCard({
  src,
  quote,
  name,
  role,
  alt,
  className,
  followers
}: TestimonialCardProps) {
  return (
    <div
      className={cn(
        "shrink-0 backdrop-blur-md p-8",
        "transition-all duration-300 ease-out",
        "hover:-translate-y-1 hover:shadow-[0_30px_30px_-30px_rgba(0,0,0,0.3)]",
        className
      )}
    >
        <div className="flex items-start gap-8">
            <Image
            src= {src}
            alt= {alt ?? name}
            width={44}
            height={44}
            className="rounded-full object-contain"
            />  
            <div className="text-2xl text-white text-left">
            <p className="">
                “{quote}”
            </p>
            <p className="mt-10">
                {name}
            </p>
            <p className="text-base">
                {role}
            </p>
            </div>
            <div className="bg-white rounded-[22px] p-4 font-bold text-left mt-7">
            <p className="mb-0 leading-5 text-base">
                Followers
            </p>
            <p className="h3 leading-10 text-primary pb-1">
                {followers}
            </p>
            </div>

        </div>
    </div>
  );
}