// Input component with glassmorphism styling

use leptos::ev::Event;
use leptos::prelude::*;

/// Input field component with glassmorphism styling
#[component]
pub fn Input(
    #[prop(default = "text")] input_type: &'static str,
    #[prop(optional)] placeholder: Option<&'static str>,
    #[prop(optional)] value: Option<Signal<String>>,
    #[prop(optional)] on_input: Option<Box<dyn Fn(String) + 'static>>,
    #[prop(default = "")] class: &'static str,
) -> impl IntoView {
    let (internal_value, set_internal_value) = signal(String::new());
    let value_signal: Signal<String> = value.unwrap_or_else(|| internal_value.into());

    let combined_class = format!(
        "w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white \
         placeholder-white/50 focus:outline-none focus:border-cyan-400/70 focus:shadow-lg \
         focus:shadow-cyan-500/30 transition-all duration-200 {}",
        class
    );

    view! {
        <input
            type=input_type
            placeholder=placeholder.unwrap_or("")
            prop:value=move || value_signal.get()
            on:input=move |ev: Event| {
                let new_val = event_target_value(&ev);
                set_internal_value.set(new_val.clone());
                if let Some(ref handler) = on_input {
                    handler(new_val);
                }
            }
            class=combined_class
        />
    }
}
