use leptos::{
    IntoView, component,
    html::Textarea,
    prelude::{ClassAttribute, ElementChild, GlobalAttributes, NodeRef, NodeRefAttribute},
    view,
};

use crate::components::get_id;

#[component]
pub fn TextareaPlaceholder(
    label: &'static str,
    node_ref: NodeRef<Textarea>,
    #[prop(default = None)] initial_value: Option<String>,
) -> impl IntoView {
    let id = get_id();

    view! {
        <div class="relative h-80">
            <textarea
                id=id.to_string()
                class="\
                absolute \
                bottom-0 \
                bg-gray-200 \
                border-2 \
                border-b-2 \
                border-b-trasparent \
                border-gray-200 \
                focus:border-indigo-600 \
                focus:border-b-transparent \
                focus:outline-none \
                h-[300px] \
                placeholder-transparent \
                rounded-t-lg \
                text-gray-900 \
                w-full \
                "
                placeholder="sentinel value"
                node_ref=node_ref
            >
                {initial_value}
            </textarea>

            <label
                for=id.to_string()
                class="\
                absolute \
                transition-all \
                text-sm \
                text-gray-700 \
                top-0 \
                left-0 \
                "
            >
                {label}
            </label>
        </div>
    }
}