from shiny import ui
from shiny_tail import tailwind


def step_card(numero="#1",titulo="titulo", contenido=None):
    return ui.div(
        {
            "class": "relative bg-[#405B28] text-white "
                     "rounded-2xl  w-96 mx-auto "

        },
        # Número destacado
        ui.div(
            numero,
            {
                "class": "absolute -top-4 -left-4 bg-lime-400 text-green-900 font-bold text-xl "
                         "w-12 h-12 flex items-center justify-center rounded-full "
                         "shadow-[0_0_20px_rgba(163,230,53,0.8)]"
            }
        ),
        ui.div(
            {"class": "py-2 px-4"},
            ui.h3({"class": "text-xl font-bold text-center"},titulo),
            # Contenido dinámico
            contenido if contenido is not None else ui.div(
                ui.h2("Step sin contenido", {"class": "text-lg font-semibold mb-2 mt-4"}),
                ui.p(
                    "Agrega contenido pasando un componente UI como parámetro.",
                    {"class": "text-sm text-lime-100 leading-relaxed"}
                )
            )
        )

    )