import React from 'react';
import type { Theme } from '../../types/theme';
import './CreationActions.css';

interface CreationActionsProps {
  selectedTheme: Theme | null;
  error: string | null;
  creating: boolean;
  presentationTitle: string;
  onCancel: () => void;
  onCreate: () => void;
}

export const CreationActions: React.FC<CreationActionsProps> = ({
  selectedTheme,
  error,
  creating,
  presentationTitle,
  onCancel,
  onCreate
}) => {
  return (
    <section className="creation-actions">
      <div className="selected-theme-info">
        {selectedTheme && (
          <div className="theme-preview-info">
            <h3>Selected Theme: {selectedTheme.name}</h3>
            <p>{selectedTheme.description}</p>
            <div className="theme-stats">
              <span>{selectedTheme.layouts.length} layouts available</span>
              {selectedTheme.author && <span>by {selectedTheme.author}</span>}
            </div>
          </div>
        )}
        
        {error && (
          <div className="creation-error">
            <p>Failed to create presentation: {error}</p>
          </div>
        )}
      </div>
      
      <div className="action-buttons">
        <button 
          onClick={onCancel} 
          className="button secondary"
          type="button"
          disabled={creating}
        >
          Cancel
        </button>
        <button 
          onClick={onCreate}
          className="button primary"
          type="button"
          disabled={!selectedTheme || !presentationTitle.trim() || creating}
        >
          {creating ? 'Creating...' : 'Create Presentation'}
        </button>
      </div>
    </section>
  );
};