import { WalletHeader } from '@widgets/wallet-header'
import { SeedPhraseWidget } from '@widgets/seed-phrase'
import { useRevealMnemonic } from '@features/wallet'
import styles from './SeedPhrasePage.module.css'

export function SeedPhrasePage() {
  const { data: mnemonic, isLoading } = useRevealMnemonic()
  const words = mnemonic ? mnemonic.split(' ') : []

  return (
    <div className={styles.page}>
      <WalletHeader />
      <main className={styles.main}>
        <div className={styles.glow} />
        {!isLoading && <SeedPhraseWidget words={words} />}
      </main>
    </div>
  )
}
