use leptos::prelude::*;

#[component]
pub fn FormFieldSSR(
    label: String,
    error: Option<String>,
    #[prop(default = false)] required: bool,
    help_text: Option<String>,
    #[prop(default = false)] has_error: bool,
    children: Children,
    class: &'static str,
) -> impl IntoView {
    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">
                        {err}
                    </span>
                }
            })}

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