import { TypewriterText } from './TypewriterText';
import type { TranslationKey } from '@/lib/i18n';

interface DeployErrorProps {
  t: (key: TranslationKey) => string;
  errorMessage: string;
  onTryAgain: () => void;
}

export function DeployError({ t, errorMessage, onTryAgain }: DeployErrorProps) {
  return (
    <div className="backdrop-blur-md bg-black/20 rounded-2xl p-10 border border-white/10 shadow-2xl text-center animate-fadeIn">
      <div className="mb-6 animate-shake">
        <div className="inline-flex items-center justify-center w-20 h-20 rounded-full border-2 border-red-500 text-red-500 text-5xl bg-red-500/10">
          ✕
        </div>
      </div>

      <h2 className="text-2xl font-bold mb-4 min-h-[2.4rem] text-white">
        <TypewriterText text={t('deploymentFailed')} speed={30} />
      </h2>

      <div className="mb-8 p-4 bg-red-500/10 border border-red-500/20 rounded-xl font-mono text-sm text-red-200">
        {errorMessage}
      </div>

      <button
        onClick={onTryAgain}
        className="w-full py-3.5 px-6 rounded-xl font-semibold bg-white text-black hover:bg-white/90 transition-colors"
      >
        {t('tryAgain')}
      </button>
    </div>
  );
}