import * as React from "react"

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

interface IFeaturesCarousel {
    elements: {
        title: string;
        icon: React.ReactNode,
        description: string,
        Link?: string
    }[]
}
export default function FeaturesCarousel({ elements }: IFeaturesCarousel) {
    const isOdd = elements.length % 3 === 1
    return (
        <Carousel
            opts={{
                align: "start",
            }}
            className="w-full "
        >
            <CarouselContent>
                {elements.map((element, index) => (
                    <CarouselItem key={index} className="basis-[100%] md:basis-1/2 xl:basis-1/4 w-full">
                        <FeatureCard key={index} feature={element} isOdd={isOdd} isLast={index === elements.length - 1} className=" text-center w-full py-10" />
                    </CarouselItem>
                ))}
            </CarouselContent>
            <div className="max-lg:hidden">
                <CarouselPrevious />
                <CarouselNext />
            </div>
        </Carousel>
    )
}