// A reusable component. Route: none — mounted inside a page with
// <div data-component="counter" ...props></div>.
//
// Components render on the SERVER (with their props applied) and are hydrated in
// the browser by the generic reactive runtime — they ship no JS of their own.
component Counter {
  // Props arrive as mount attributes, each coerced to the type of its default
  // (so start="5" arrives as the number 5).
  props {
    start = 0
    label = "Count"
  }

  // State can reference props. `count` seeds the reactive scope.
  state count = start

  view {
    <button @click="count++" class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm transition hover:bg-indigo-500 active:scale-[0.98]">{label}: {count}</button>
  }
}