import React from 'react';
import { useLearnerHub } from '../LearnerHubContext';
import { CanvasSetupCheckStep } from '../steps/CanvasSetupCheckStep';
import { LearnerHubGitCloneStep } from '../steps/LearnerHubGitCloneStep';

const stepComponents: Record<string, React.ComponentType> = {
  CanvasSetupCheckStep,
  LearnerHubGitCloneStep,
};

export const StepContent: React.FC = () => {
  const { steps, currentStepIndex, scrollContainerRef } = useLearnerHub();
  const currentStep = steps[currentStepIndex];

  if (!currentStep) {
    return <div className="flex-1 flex items-center justify-center">No step selected</div>;
  }

  const StepComponent = stepComponents[currentStep.componentName];

  if (!StepComponent) {
    return (
      <div className="flex-1 flex items-center justify-center">
        Step component not found: {currentStep.componentName}
      </div>
    );
  }

  return (
    <div
      ref={scrollContainerRef}
      className="flex-1 overflow-y-auto p-8"
    >
      <StepComponent />
    </div>
  );
};
