"""
Toggle component - Demonstrates conditional rendering with if statements.

This component uses a signal with comparison to conditionally render content.
"""

from ritz.syntax import *


@component
def Toggle():
    """Counter that shows different content based on threshold."""
    count = signal(0)

    def increment():
        count += 1

    with Div(class_="toggle-app"):
        with H1():
            yield "Conditional Rendering Demo"

        with P(class_="info"):
            yield "This demonstrates if/else rendering in WASM"

        with Div(class_="controls"):
            with Button(onclick=increment):
                yield "Increment Counter"

        with Div(class_="display"):
            if count > 5:
                with Div(class_="high"):
                    with P():
                        yield "✨ Count is HIGH (> 5)"
                    with P(class_="count"):
                        yield f"Current count: {count}"
            else:
                with Div(class_="low"):
                    with P():
                        yield "📉 Count is low (<= 5)"
                    with P(class_="count"):
                        yield f"Current count: {count}"