import React from 'react';
import { Link } from 'react-router-dom';

interface ErrorStateProps {
  error: string;
  presentationId?: string;
}

export const ErrorState: React.FC<ErrorStateProps> = ({ error, presentationId }) => {
  return (
    <div className="slide-editor">
      <header className="slide-editor-header">
        <div className="editor-info">
          {presentationId ? (
            <Link to={`/presentations/${presentationId}/edit/slides/1`} className="back-button">
              ← Back to Presentation
            </Link>
          ) : (
            <Link to="/presentations" className="back-button">
              ← Back to Presentations
            </Link>
          )}
          <div className="editor-title">
            <h1>Slide Editor Error</h1>
          </div>
        </div>
      </header>

      <main className="slide-editor-content">
        <div className="error-container">
          <div className="error-content">
            <h2>Unable to Load Slide Editor</h2>
            <p>{error}</p>
            
            <div className="error-actions">
              <button 
                type="button"
                onClick={() => window.location.reload()}
                className="action-button primary"
              >
                Reload Page
              </button>
              
              {presentationId ? (
                <Link 
                  to={`/presentations/${presentationId}/edit/slides/1`}
                  className="action-button secondary"
                >
                  Return to Presentation
                </Link>
              ) : (
                <Link 
                  to="/presentations"
                  className="action-button secondary"
                >
                  Back to Presentations
                </Link>
              )}
            </div>
          </div>
        </div>
      </main>
    </div>
  );
};