"""
HighFive counter component - Demonstrates reactive signals and event handlers.

This component uses a signal to track state and an onclick handler to update it.
"""

from ritz.syntax import *


@component
def HighFive():
    """A counter that tracks high fives."""
    high_fives = signal(0)

    def increment():
        high_fives += 1

    with Div(class_="high-five-app"):
        with P():
            yield "Give me a high five! ✋"

        with P(class_="count"):
            yield f"High fives: {high_fives}"

        with Button(onclick=increment):
            yield "High Five!"


@component
def RitzMain():
    """Entry point - required for all Ritz applications."""
    yield HighFive()