Dialog

use leptos::prelude::*;

use crate::components::_coming_soon::dialog::{
    Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle,
    DialogTrigger,
};
use crate::components::ui::button::Button;
use crate::components::ui::input::Input;
use crate::components::ui::label::Label;

#[component]
pub fn DemoDialog() -> impl IntoView {
    let name = RwSignal::new("Max Wells".to_string());
    let username = RwSignal::new("@maxwells".to_string());

    view! {
        <Dialog>
            <DialogTrigger>Open Dialog</DialogTrigger>

            <DialogContent class="sm:max-w-[425px]">
                <DialogBody>
                    <DialogHeader>
                        <DialogTitle>"Edit profile"</DialogTitle>

                        <DialogDescription>
                            "Make changes to your profile here. Click save when you're done."
                        </DialogDescription>
                    </DialogHeader>

                    <div class="flex flex-col gap-4 justify-center">
                        <div class="flex gap-3 items-center">
                            <Label html_for="name-1">Name</Label>
                            <Input autofocus=true id="name-1" name="name" value=Some(name.read_only()) />
                        </div>
                        <div class="flex gap-3 items-center">
                            <Label html_for="username-1">Username</Label>
                            <Input id="username-1" name="username" value=Some(username.read_only()) />
                        </div>
                    </div>

                    <DialogFooter>
                        <DialogClose>"Cancel"</DialogClose>
                        <Button r#type="submit">Save changes</Button>
                    </DialogFooter>
                </DialogBody>
            </DialogContent>
        </Dialog>
    }
}