final accepted = flux(false);

FxCheckbox(
  signal: accepted,
  label: "I agree to the Terms",
)

final darkMode = flux(false);

FxSwitcher(
  signal: darkMode,
  activeColor: Colors.blue,
)

class SettingsGroup extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final notifications = flux(true);
    final soundEffects = flux(false);
    final developerMode = flux(false);

    return Fx.box(
      child: Fx.col(
        gap: 16,
        children: [
          // 1. Primary Toggle
          Fx.row(
            main: MainAxisAlignment.spaceBetween,
            children: [
              Fx.col(
                cross: CrossAxisAlignment.start,
                children: [
                  Fx.text("Push Notifications").font.md().bold(),
                  Fx.text("Receive real-time system alerts").font.xs().muted(),
                ],
              ),
              Fx.switcher(signal: notifications, activeColor: Colors.blue),
            ],
          ),

          const Divider(),

          // 2. Conditional Control
          Fx(() => Fx.row(
            main: MainAxisAlignment.spaceBetween,
            children: [
              Fx.text("Sound Effects").muted(!notifications.value),
              Fx.switcher(
                signal: soundEffects, 
                activeColor: Colors.blue,
                enabled: notifications.value, // Integrated disabled state
              ),
            ],
          )),

          const Divider(),

          // 3. Checkbox Option
          Fx.row(
            children: [
              Fx.checkbox(signal: developerMode),
              Fx.text("Enable Kernel Debug Mode").font.sm().ml(12),
            ],
          ).onTap(() => developerMode.toggle()), // Easy toggle API
          
          Fx(() => developerMode.value 
            ? Fx.text("WARNING: Debug mode exposes internal registers.").danger().font.xs().mt(8)
            : const SizedBox.shrink()
          ),
        ],
      )
    )
    .p(24)
    .bg(Colors.white)
    .rounded(16)
    .border(1, Colors.slate100);
  }
}