Carousel

use leptos::prelude::*;

use crate::components::ui::carousel::{
    CarouselCaption, CarouselContainer, CarouselController, CarouselDot, CarouselDots, CarouselImage, CarouselSlide,
    SCRIPT_CAROUSEL,
};

#[component]
pub fn DemoCarousel() -> impl IntoView {
    view! {
        <div class="w-full">
            <CarouselContainer class="mx-auto w-[600px] h-[300px]">
                <CarouselSlide>
                    <CarouselImage src=IMAGE_1 />
                    <CarouselCaption>{"Slide 1"}</CarouselCaption>
                </CarouselSlide>
                <CarouselSlide>
                    <CarouselImage src=IMAGE_2 />
                    <CarouselCaption>{"Slide 2"}</CarouselCaption>
                </CarouselSlide>
                <CarouselSlide>
                    <CarouselImage src=IMAGE_3 />
                    <CarouselCaption>{"Slide 3"}</CarouselCaption>
                </CarouselSlide>

                <CarouselController class="left-0" onclick="moveSlide(-1)">
                    "❮"
                </CarouselController>
                <CarouselController class="right-0" onclick="moveSlide(1)">
                    "❯"
                </CarouselController>
            </CarouselContainer>

            <CarouselDots>
                <CarouselDot onclick="currentSlide(1)" />
                <CarouselDot onclick="currentSlide(2)" />
                <CarouselDot onclick="currentSlide(3)" />
            </CarouselDots>
        </div>

        <script>{SCRIPT_CAROUSEL}</script>
    }
}

/*´:°•.°+.*•´.*:˚.°*.˚•´.°:°•.°•.*•´.*:˚.°*.˚•´.°:°•.°+.*•´.*:*/
/*                      ✨ CONSTANTS ✨                       */
/*.•°:°.´+˚.*°.˚:*.´•*.+°.•°:´*.´•*.•°.•°:°.´:•˚°.*°.˚:*.´+°.•*/

const IMAGE_1: &str =
    "https://plus.unsplash.com/premium_photo-1664474619075-644dd191935f?q=80&w=1469&auto=format&fit=crop";
const IMAGE_2: &str = "https://images.unsplash.com/photo-1584395630827-860eee694d7b?q=80&w=1469&auto=format&fit=crop";
const IMAGE_3: &str = "https://images.unsplash.com/photo-1506744038136-46273834b3fb?q=80&w=1469&auto=format&fit=crop";