import React from 'react';
import { useSelector } from 'react-redux';
import { RootState } from '../../store/store';
import Introduction from './phases/Introduction';
import Surveillance from './phases/Surveillance';
import Methods from './phases/Methods';
import Medications from './phases/Medications';
import Stop from './phases/Stop';
import End from './phases/End';
import TreatmentResults from './phases/TreatmentResults';

const Varrometer: React.FC = () => {
  const { currentPhase } = useSelector((state: RootState) => state.varrometer);

  const renderPhase = () => {
    switch (currentPhase) {
      case 'introduction':
        return <Introduction />;
      case 'surveillance':
        return <Surveillance />;
      case 'methods':
        return <Methods />;
      case 'medications':
        return <Medications />;
      case 'treatment_results':
        return <TreatmentResults />;
      case 'end':
        return <End />;
      default:
        return <Introduction />;
    }
  };

  return renderPhase();
};

export default Varrometer;