import { Hono } from 'hono'
import { IndexPage, ProfileExamplesPage, ButtonExamplesPage, NavigationExamplesPage, FormExamplesPage } from './examples/ssr/pages'
import { LandingPage } from './examples/ssr/landing'
import { styles, stylesToCSS } from './src'

const app = new Hono()

app.get('/', c => c.html(<LandingPage />))

app.get('/ssr', c => c.html(<IndexPage path="/ssr" />))

app.get('/ssr/profile', c => c.html(<ProfileExamplesPage path="/ssr/profile" />))

app.get('/ssr/buttons', c => c.html(<ButtonExamplesPage path="/ssr/buttons" />))

app.get('/ssr/navigation', c => c.html(<NavigationExamplesPage path="/ssr/navigation" />))

app.get('/ssr/form', c => c.html(<FormExamplesPage path="/ssr/form" />))

app.get('/styles', c => c.text(stylesToCSS(styles)))

app.get('/spa/*', async c => c.html(await Bun.file('./examples/spa/index.html').text()))

app.get('/spa.js', async c => {
  const file = Bun.file('./dist/spa.js')
  return new Response(file, {
    headers: {
      'Content-Type': 'application/javascript',
    },
  })
})

export default {
  port: 3300,
  fetch: app.fetch,
}