Card Wobble

use leptos::prelude::*;
use leptos_meta::Stylesheet;

use crate::components::extensions::card_wobble::{
    CardWobble, CardWobbleContent, CardWobbleImage, CardWobbleImageWrapper,
};
use crate::components::ui::button::Button;

#[component]
pub fn DemoCardWobble() -> impl IntoView {
    view! {
        <Stylesheet id="card_wobble" href="/components/card_wobble.css" />
        <script src="/components/card_wobble.js" />

        <div class="overflow-x-hidden p-10 w-full h-full">
            <CardWobble>
                <CardWobbleImageWrapper>
                    <CardWobbleImage
                        src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/225363/forest.jpg"
                        alt="Woods landscape"
                    />
                </CardWobbleImageWrapper>

                <CardWobbleContent class="flex absolute top-0 left-0 z-10 flex-col justify-center items-center p-4 w-full h-full">
                    <h2 class="relative text-6xl font-bold text-white">"In The Wilderness"</h2>
                    <Button class="relative z-10 slide__action">Book Travel</Button>
                </CardWobbleContent>
            </CardWobble>
        </div>
    }
}