use leptos::prelude::*;

#[component]
pub fn FormFieldClient(
    /// Field label
    label: String,
    /// Error message to display
    error: Option<String>,
    /// Whether field is required
    #[prop(default = false)]
    required: bool,
    /// Help text shown below field
    help_text: Option<String>,
    /// Whether field is in error state (for styling)
    #[prop(default = false)]
    has_error: bool,
    /// Children (input elements)
    children: Children,
    /// Additional CSS classes
    #[prop(default = "")]
    class: &'static str,
) -> impl IntoView {
    // Container class with error state styling
    let container_class = format!(
        "flex flex-col gap-2{} {}",
        if has_error { " form-field-error" } else { "" },
        class
    );

    view! {
        <div class=container_class>
            <label class="text-sm font-medium text-white">
                {label}
                {required.then(|| view! { <span class="text-red-400 ml-1">"*"</span> })}
            </label>

            <div class={if has_error { "form-field-input-error" } else { "" }}>
                {children()}
            </div>

            {error.map(|err| {
                view! {
                    <span class="text-sm text-red-400 animate-fadeIn">
                        {err}
                    </span>
                }
            })}

            {help_text.map(|text| {
                view! {
                    <span class="text-sm text-white/60">
                        {text}
                    </span>
                }
            })}
        </div>
    }
}
