use crate::components::card::{Card, CardVariant};
use leptos::prelude::*;

#[component]
pub fn SimpleHero(
    #[prop(optional)] id: Option<&'static str>,
    #[prop(optional)] icon: Option<AnyView>,
    main_text: String,
    #[prop(optional)] sub_text: Option<String>,
    #[prop(optional)] class: Option<&'static str>,
) -> impl IntoView {
    let base_classes = "relative flex flex-col items-center justify-center text-center px-4 sm:px-6 lg:px-8 overflow-hidden";
    let height_classes = "py-12 sm:py-16 lg:py-20";
    let variant_classes = "bg-transparent";

    let final_classes = match class {
        Some(c) => format!(
            "{} {} {} {}",
            base_classes, height_classes, variant_classes, c
        ),
        None => format!("{} {} {}", base_classes, height_classes, variant_classes),
    };


    view! {
        <section
            class=final_classes
            id=id.unwrap_or("hero-simple-section")
        >
            <div 
                class="absolute inset-0 pointer-events-none"
                style=""
                id="simple-hero-shading"
            ></div>
            <div class="flex flex-col items-center justify-center z-10 relative w-full" id="hero-simple-content">
                {icon.map(|i| view! {
                    <div
                        class="flex items-center justify-center mb-6 sm:mb-8 lg:mb-12"
                        id="hero-icon"
                    >
                        <Card
                            variant=CardVariant::IconContainer
                            padding="p-3 sm:p-4"
                            max_width="w-[80px] sm:w-[96px] lg:w-[112px]"
                            class="w-[80px] h-[80px] sm:w-[96px] sm:h-[96px] lg:w-[112px] lg:h-[112px] flex items-center justify-center"
                            id="hero-icon-card"
                        >
                            {i}
                        </Card>
                    </div>
                })}

                // passText Container - responsive layout
                <div
                    class="flex flex-col items-center gap-4 sm:gap-6 max-w-xs sm:max-w-md lg:max-w-2xl xl:max-w-4xl px-4 w-full"
                    id="hero-text-container"
                >
                    <h1
                        class="w-full text-center font-semibold text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl leading-tight tracking-tight"
                        style="color: var(--text-primary);"
                        id="hero-main-text"
                    >
                        {main_text}
                    </h1>

                    {sub_text.map(|text| view! {
                        <p
                            class="w-full text-center font-normal text-sm sm:text-base lg:text-lg leading-relaxed tracking-tight max-w-prose"
                            style="color: var(--text-muted);"
                            id="hero-sub-text"
                        >
                            {text}
                        </p>
                    })}
                </div>
            </div>
        </section>
    }
}
