use leptos::prelude::*;

#[component]
pub fn Container(children: Children) -> impl IntoView {
    view! {
        <div class="custom-container">
            {children()}
        </div>
    }
}

#[component]
pub fn PageContent(
    children: Children,
    #[prop(optional)] id: Option<&'static str>,
) -> impl IntoView {
    view! {
        <div class="min-h-[calc(100vh-200px)] relative z-[1]" id=id>
            <Container>
                <div class="py-[50px]">
                    {children()}
                </div>
            </Container>
        </div>
    }
}

#[component]
pub fn PageTitle(
    title: String,
    #[prop(optional)] id: Option<&'static str>,
) -> impl IntoView {
    view! {
        <h1 class="text-[48px] font-bold text-[var(--text-primary)] mb-5 text-center" id=id>
            {title}
        </h1>
    }
}

#[component]
pub fn PageDescription(
    description: String,
    #[prop(optional)] id: Option<&'static str>,
) -> impl IntoView {
    view! {
        <p class="text-base text-[var(--text-secondary)] text-center max-w-[600px] mx-auto leading-relaxed" id=id>
            {description}
        </p>
    }
}

#[component]
pub fn ButtonPrimary(children: Children) -> impl IntoView {
    view! {
        <button class="py-[12px] px-[60px] bg-[var(--btn-primary-bg)] rounded-xl font-semibold text-sm border-none cursor-pointer transition-opacity duration-300 text-[var(--main-dark-text)] no-underline inline-block hover:opacity-80">
            {children()}
        </button>
    }
}
