import { useNavigate } from 'react-router-dom'
import { ROUTES } from '@shared/config/routes'
import { Button } from '@shared/ui'
import { ProfileSection } from './ProfileSection'
import styles from './MnemonicSection.module.css'

export function MnemonicSection() {
  const navigate = useNavigate()

  return (
    <ProfileSection title="Мнемоника">
      <div className={styles.mnemonicRow}>
        <div className={styles.mnemonicInfo}>
          <span className={styles.mnemonicIcon}>🔑</span>
          <span className={styles.mnemonicText}>Сид-фраза из 12 слов для восстановления кошелька</span>
        </div>
        <Button variant="danger" onClick={() => navigate(ROUTES.SEED_PHRASE)}>⚠ Показать мнемонику</Button>
      </div>
    </ProfileSection>
  )
}
