import { useTokenExplorer } from '@public-assembly/builder-utils'

import { useTokenExplorer } from '@public-assembly/builder-utils'
 
function App({ tokenId }: { tokenId: number }) {
  const { tokenId, navigatedTokenId, incrementId, decrementId, isFirstToken, isLastToken } =
    useTokenExplorer({ tokenId: tokenId })
 
  return (
    <>
      <p>Latest minted token: {tokenId}</p>
      <p>Now viewing token: {navigatedTokenId}</p>
      <>
        <button disabled={isFirstToken} onClick={decrementId}>
          Backward
        </button>
        <button disabled={isLastToken} onClick={incrementId}>
          Forward
        </button>
      </>
    </>
  )
}

{
  tokenId: number
  navigatedTokenId: number
  incrementId: () => void
  decrementId: () => void
  isFirstToken: boolean
  isLastToken: boolean
}