import React from 'react';
import './Content.css';

// Import content modules
import Inventory from './content_modules/Inventory';
import Cursors from './content_modules/Cursors';
import Crates from './content_modules/Crates';
import Settings from './content_modules/Settings';

function Content({ activePage, cursors, currentCursorIndex, selectCursor, nextCursor, settings, setSettings }) {
  // Render the appropriate content based on active page
  const renderContent = () => {
    switch (activePage) {
      case 'inventory':
        return <Inventory
          cursors={cursors}
          currentCursorIndex={currentCursorIndex}
          selectCursor={selectCursor}
        />;
      case 'cursors':
        return (
          <Cursors
            cursors={cursors}
            currentCursorIndex={currentCursorIndex}
            selectCursor={selectCursor}
            nextCursor={nextCursor}
          />
        );
      case 'crates':
        return <Crates />;
      case 'settings':
        return <Settings settings={settings} setSettings={setSettings} />;
      default:
        return <Cursors
          cursors={cursors}
          currentCursorIndex={currentCursorIndex}
          selectCursor={selectCursor}
          nextCursor={nextCursor}
        />;
    }
  };

  return (
    <div className="app-content">
      {renderContent()}
    </div>
  );
}

export default Content;