import React from "react";
import StepIndicators from "./step-indicator";

interface StepRoute {
  path?: string;
  number: number;
  title: string;
  component: JSX.Element;
}

const StepRoute: React.FC<StepRoute> = ({ number, title, component }) => {
  return (
    <>
      <StepIndicators currentStep={number} />
      <div className="booking__panel-frame booking__panel-frame--transparent">
        <div className="booking__panel-heading">
          <h4 className="booking__panel-title">
            {number}. {title}
          </h4>
        </div>
        <div className="booking__panel-body">{component}</div>
      </div>
    </>
  );
};

export default StepRoute;