import { ChevronLeft, ChevronRight } from "@properui/icons";
import { Carousel, useCarousel } from "@/components/application/carousel/carousel-base";
import { PaginationDot } from "@/components/application/pagination/pagination-dot";
import { IMAGES } from "@/utils/demo-assets";

export const CarouselLg = () => {
    return (
        <Carousel.Root className="relative aspect-[1.6] max-w-160">
            <Carousel.PrevTrigger className="bg-alpha-white/90 text-fg-secondary outline-focus-ring absolute top-1/2 left-5 z-10 flex size-11 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full p-2 backdrop-blur-xs focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50">
                <ChevronLeft className="size-6" />
            </Carousel.PrevTrigger>
            <Carousel.NextTrigger className="bg-alpha-white/90 text-fg-secondary outline-focus-ring absolute top-1/2 right-5 z-10 flex size-11 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full p-2 backdrop-blur-xs focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50">
                <ChevronRight className="size-6" />
            </Carousel.NextTrigger>

            <div className="absolute bottom-4 left-1/2 z-10 -translate-x-1/2">
                <CarouselDotIndicator size="lg" framed />
            </div>

            <CarouselSlides />
        </Carousel.Root>
    );
};
Carousel components
