import 'package:webf/webf.dart';
import 'package:flutter/material.dart';

// 1. Define the Element
class FlutterButtonElement extends WidgetElement {
  FlutterButtonElement(BindingContext? context) : super(context);

  @override
  Widget build(BuildContext context, List<Widget> children) {
    return ElevatedButton(
      onPressed: () {
        // Dispatch custom event to JS
        dispatchEvent(Event('click'));
      },
      child: Text(getAttribute('label') ?? 'Click Me'),
    );
  }
}

// 2. Register (usually in main.dart)
void main() {
  WebF.defineCustomElement('flutter-button', (context) => FlutterButtonElement(context));
  runApp(MyApp());
}

<flutter-button label="Submit Order" id="btn"></flutter-button>
<script>
  document.getElementById('btn').addEventListener('click', () => {
    console.log('Button clicked via Flutter!');
  });
</script>