use dioxus::prelude::*;

/// A simple styled input box
#[component]
pub fn FormInput(
    /// The placeholder text and label. When text is entered in the input, the label is shown above
    /// the input box.
    label: String,
    #[props(default)] name: Option<String>,
    #[props(default)] required: bool,
    #[props(default)] r#type: String,
    children: Element,
) -> Element {
    let name = name.unwrap_or(label.to_lowercase());

    rsx! {
        div {
            class: "group/field",

            p {
                class: "opacity-0 not-group-has-placeholder-shown/field:opacity-70 transition-opacity pl-2",
                {label.clone()}
            }

            label {
                class: "input w-full",

                {children}

                input {
                    name,
                    required,
                    r#type,
                    placeholder: label,
                }
            }
        }
    }
}