import * as React from "react"

import {
    Carousel,
    CarouselContent,
    CarouselItem,
    CarouselNext,
    CarouselPrevious,
} from "@/components/ui/carousel/CustomCarousel"
import TestemonialCard from "../cards/TestemonialCard";
import { StaticImageData } from "next/image";

interface ITestemonialsCarousel {
    elements: {
        image: StaticImageData | string,
        quote: string;
        name: string,
        description: string,
        scale?:number
    }[]
}
export default function TestemonialsCarousel({ elements }: ITestemonialsCarousel) {
    return (
        <Carousel
            opts={{
                align: "start",
            }}
            className="w-full "
        >
            <CarouselContent>
                {elements.map((element, index) => (
                    <CarouselItem key={index} className="basis-[100%] w-full flex justify-center items-center">
                        <TestemonialCard testimonial={element} />
                    </CarouselItem>
                ))}
            </CarouselContent>
            <div className="max-lg:hidden">
                <CarouselPrevious />
                <CarouselNext />
            </div>
        </Carousel>
    )
}