use leptos::{
    IntoView, component,
    prelude::{Children, ClassAttribute, ElementChild},
    view,
};
use leptos_meta::Style;

#[component]
pub fn Container(header: impl IntoView, children: Children) -> impl IntoView {
    view! {
        <Style>
            "
            .rocie-container {
                border-width: 0.1rem;
                border-style: solid;
                border-color: gray;
                border-radius: 15%;

                padding: 0.2rem;

                text-align: left;
            }
            .rocie-container-header {
                font-size: 1.5rem;
            }
            "
        </Style>

        <div class="rocie-container">
            <p class="rocie-container-header">{header}</p>
            {children()}
        </div>
    }
}