import { Card } from '../ui'
import { t } from '@/lib/i18n'
import { SyncProgressBar } from '../SyncProgressBar'
import { KeyManagementImportSection } from './KeyManagementImportSection'
import { KeyManagementRecoverySection } from './KeyManagementRecoverySection'
import { useKeyManagementManager } from './useKeyManagementManager'

export function KeyManagementManager(): React.ReactElement {
  const { state, actions } = useKeyManagementManager()

  if (state.loading) {
    return (
      <Card variant="default" className="bg-cyber-darker">
        <p className="text-cyber-accent">{t('settings.keyManagement.loading')}</p>
      </Card>
    )
  }

  return (
    <div className="space-y-6">
      <Card variant="default" className="bg-cyber-darker">
        <h2 className="text-2xl font-bold text-neon-cyan mb-4">{t('settings.keyManagement.title')}</h2>
        <KeyManagementImportSection state={state} actions={actions} />
        <SyncProgressBar />
        <KeyManagementRecoverySection state={state} actions={actions} />
      </Card>
    </div>
  )
}