import { MnemonicBuilder } from '../components/MnemonicBuilder'

type Props = {
  token: string
  onComplete: () => void
}

export function OnboardingPage({ token, onComplete }: Props) {
  return (
    <div>
      <h1 style={{ fontFamily: 'var(--font-header)', marginBottom: '0.5rem' }}>
        Build Your Mnemonics
      </h1>
      <p style={{ color: 'var(--color-brown)', marginBottom: '2rem' }}>
        Create a memorable phrase for each Morse letter. Short words for dots, long words for dashes.
      </p>
      <MnemonicBuilder token={token} onComplete={onComplete} />
    </div>
  )
}