use leptos::prelude::*;
use singlestage::checkbox::*;

#[component]
pub fn CheckboxExample() -> impl IntoView {
    view! { <Checkbox>"Accept terms and conditions"</Checkbox> }
}

use leptos::prelude::*;
use singlestage::{Label, checkbox::*};

#[component]
pub fn SubtextExample() -> impl IntoView {
    view! {
        <div class="flex items-start gap-3">
            <Checkbox id="checkbox-with-text" />
            <div class="grid gap-2">
                <Label label_for="checkbox-with-text">"Accept terms and conditions"</Label>
                <p class="text-(--muted-foreground) text-sm">
                    "By clicking this checkbox, you agree to the terms and conditions."
                </p>
            </div>
        </div>
    }
}

use leptos::prelude::*;
use singlestage::{Label, checkbox::*};

#[component]
pub fn FormExample() -> impl IntoView {
    view! {
        <form class="form flex flex-row items-start gap-3 rounded-md border p-4 shadow-xs">
            <Checkbox id="checkbox-form-1" />
            <div class="flex flex-col gap-1">
                <Label label_for="checkbox-form-1" class="leading-snug">
                    "Use different settings for my mobile devices"
                </Label>
                <p class="text-(--muted-foreground) text-sm leading-snug">
                    "You can manage your mobile notifications in the mobile settings page."
                </p>
            </div>
        </form>
    }
}

use leptos::prelude::*;
use singlestage::{Button, checkbox::*};

#[component]
pub fn GroupExample() -> impl IntoView {
    let value = RwSignal::new(vec![
        "recents".to_string(),
        "home".to_string(),
        "applications".to_string(),
    ]);

    view! {
        <form class="form flex flex-col gap-4">
            <p>"Value: "{move || format!("{:#?}", value.get())}</p>

            <CheckboxGroup value>
                <legend>
                    "Sidebar"
                    <p class="text-(--muted-foreground) text-sm">
                        "Select the items you want to display in the sidebar."
                    </p>
                </legend>

                <Checkbox value="recents">"Recents"</Checkbox>
                <Checkbox value="home">"Home"</Checkbox>
                <Checkbox value="applications">"Applications"</Checkbox>
                <Checkbox value="desktop">"Desktop"</Checkbox>
                <Checkbox value="download">"Download"</Checkbox>
                <Checkbox value="documents">"Documents"</Checkbox>
            </CheckboxGroup>

            <Button class="w-fit">"Submit"</Button>
        </form>
    }
}