import { useTranslation } from 'react-i18next'
import { handleError } from '../../utils/error-handler'

interface DefaultFallbackProps {
  error: Error
  onReset: () => void
}

export default function DefaultFallback({ error, onReset }: DefaultFallbackProps) {
  const { t } = useTranslation('common')
  const appError = handleError(error)

  return (
    <div className="min-h-screen flex items-center justify-center bg-dark-900 p-4">
      <div className="max-w-md w-full bg-dark-800 rounded-xl p-6 border border-dark-700">
        <div className="flex items-center gap-3 mb-4">
          <div className="w-10 h-10 bg-red-500/20 rounded-lg flex items-center justify-center">
            <svg className="w-6 h-6 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
            </svg>
          </div>
          <div>
            <h2 className="text-lg font-semibold text-content-primary">{t('error.title')}</h2>
            <p className="text-sm text-txt-muted">{t('error.body')}</p>
          </div>
        </div>

        <div className="bg-dark-900 rounded-lg p-4 mb-4">
          <p className="text-sm text-content-secondary mb-2">{appError.message}</p>
          {appError.recoverable && (
            <p className="text-xs text-green-400">{t('error.recoverable')}</p>
          )}
        </div>

        <div className="flex gap-3">
          <button
            onClick={onReset}
            className="flex-1 px-4 py-2 bg-accent-blue hover:bg-blue-600 text-content-primary rounded-lg transition-colors text-sm font-medium"
          >
            {t('error.refreshPage')}
          </button>
          <button
            onClick={() => window.location.reload()}
            className="px-4 py-2 bg-dark-700 hover:bg-dark-600 text-content-secondary rounded-lg transition-colors text-sm"
          >
            {t('error.restartApp')}
          </button>
        </div>

        <p className="mt-4 text-xs text-txt-faint text-center">
          {t('error.supportHint')}
        </p>
      </div>
    </div>
  )
}