import { useNavigate } from 'react-router-dom';

interface ErrorComponentProps {
  error: string;
}

const ErrorComponent: React.FC<ErrorComponentProps> = ({ error }) => {
  const navigate = useNavigate();

  const handleTryAgain = () => {
    navigate('/home', { replace: true });
  };

  return (
    <div className="result-page error">
      <div className="error-content">
        <div className="error-container">
          <div className="error-text">Processing Failed</div>
          <div className="error-message">{error}</div>
        </div>
        <div className="error-actions">
          <div className="try-again-btn" onClick={handleTryAgain}>
            Try Again
          </div>
          <div className="back-btn" onClick={() => navigate('/home', { replace: true })}>
            Back
          </div>
        </div>
      </div>
    </div>
  );
};

export default ErrorComponent;
