import { render, useState } from 'hono/jsx/dom'
import { define } from '@because/forge'

const Wrapper = define({
  margin: '0 auto',
  marginTop: 50,
  width: '50vw',
  border: '1px solid black',
  padding: 24,
  textAlign: 'center'

})

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

  try {
    return (
      <Wrapper>
        <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>
      </Wrapper>
    )
  } catch (error) {
    console.error('Render error:', error)
    return <><h1>Error</h1><pre>{error instanceof Error ? error : new Error(String(error))}</pre></>
  }
}

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