import { render } from 'hono/jsx/dom'
import { useState } from 'hono/jsx/dom'

export default function App() {
  const [count, setCount] = useState(0)

  try {
    return (
      <>
        <h1>It works!</h1>
        <h2>Count: {count}</h2>
        <div>
          <button onClick={() => setCount(c => c + 1)}>+</button>
          &nbsp;
          <button onClick={() => setCount(c => c && c - 1)}>-</button>
        </div>
      </>
    )
  } catch (error) {
    console.error('Render error:', error)
    return <><h1>Error</h1><pre>{error instanceof Error ? error : new Error(String(error))}</pre></>
  }
}

// initial render
const root = document.getElementById('root')!
render(<App />, root)