Switch

use leptos::prelude::*;

use crate::components::ui::switch::Switch;

#[component]
pub fn DemoSwitch() -> impl IntoView {
    view! {
        <style>
            {"
            /** checked:translate-x-[-100%] checked:left-full */
            .switch__label input:checked ~ .my__switch::before {
                transform: translateX(-100%);
                left: 100%;
            }

            .switch__label input:checked ~ .my__switch {
                background: var(--primary);
            }

            .my__switch::before {
                transition: 0.2s cubic-bezier(0.7, 0.15, 0.36, 1);
            }

            /* Use design system colors for better dark mode contrast */
            .my__switch {
                background: var(--muted);
            }

            .switch__label input:checked ~ .my__switch {
                background: var(--primary);
            }
            "}
        </style>
        
        <div class="flex items-center space-x-2">
            <Switch checked=true />
            <label for="airplane">Airplane</label>
        </div>
    }
}