Sonner

use leptos::prelude::*;

use crate::components::_coming_soon::sonner::{ToastContainer, ToastListItem, ToastTrigger};

#[component]
pub fn DemoSonner() -> impl IntoView {
    view! {
        <div>
            <ToastTrigger>"+ Add Toast"</ToastTrigger>

            <ToastContainer data_position="BottomRight">
                <ToastListItem
                    data_direction="BottomUp"
                    style="--max-toasts: 5; --dismiss-delay: 5000ms; --enter-duration: 300ms; --exit-duration: 300ms; --stack-duration: 300ms; --stack-spacing: 20px; --expand-spacing: 110px; --scale-factor: 0.05; --transition-easing: ease-out; --stack-easing: ease-in-out;"
                >
                    <div />
                // <li
                // data-name="ToastItem"
                // class="absolute bottom-0 p-5 w-full bg-white rounded-lg border border-gray-300 shadow-lg transform translate-y-0 cursor-pointer max-w-96"
                // >
                // <h3 class="mb-1 text-lg font-semibold text-gray-900 leading-[1.4]">Notification Title</h3>
                // <p class="text-sm text-gray-500 leading-[1.5]">Notification message content</p>
                // </li>
                // Toast notifications will be added here dynamically -->
                </ToastListItem>
            </ToastContainer>
        </div>
    }
}