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,
) -> Element {
    let name = name.unwrap_or(label.to_lowercase());

    rsx! {
        div {
            class: "group",

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

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