import Router from 'next/router'

import { BetsList } from '../components/bets-list'
import { Page } from '../components/page'
import { SEO } from '../components/SEO'
import { Title } from '../components/title'
import { useUser } from '../hooks/use-user'

export default function TradesPage() {
  const user = useUser()

  if (user === null) {
    Router.replace('/')
    return <></>
  }

  return (
    <Page>
      <SEO title="Your trades" description="Your trades" url="/trades" />
      <Title className="mx-4 md:mx-0" text="Your trades" />
      {user && <BetsList user={user} />}
    </Page>
  )
}
