"""
{{ name | pascal_case }} Component.

This component was auto-generated by fletx.

🛠️ Customization Guide:
- You can change the parent class (`ft.Container`) to inherit from any other Flet control.
  → Example: `ft.Text`, `ft.Row`, `ft.Column`, or any custom Flet widget.
- You can add or modify internal reactive attributes.
  → Example: `self.title: RxStr = rx_title`
- You can define simple or advanced bindings using the fletx decorators
"""

import flet as ft
from fletx.core import (
    RxStr
)
from fletx.decorators import (
    simple_reactive
)

@simple_reactive(
    bindings={
        # 💡 Example:
        # "bgcolor": 'rx_bg
        # ...
    }
)
class {{ name | pascal_case }}Component(ft.Container):    # 🧩 You can replace ft.Container with any other Flet control
    """Reactive {{ name | pascal_case }} Widget"""

    def __init__(self, rx_bg: RxStr, **kwargs):
        # 📝 Define your reactive properties
        self.bg: RxStr = rx_bg

        # 🛠️ kwargs allows passing any Flet control arguments like bgcolor, padding, etc.
        super().__init__(**kwargs)

    def before_update(self):
        """Action to perform before component update"""

        # Example
        # self.content = self.build() # where build returns a flet control.