import React from 'react';

interface BookingPanelProps {
  currentStep: number;
  stepLabels: string[];
  renderTitle: (step: number) => React.ReactNode;
  children: React.ReactNode;
  StepIndicatorsComponent: React.ComponentType<{ currentStep: number; stepLabels: string[] }>;
}

const BookingPanel: React.FC<BookingPanelProps> = ({ currentStep, stepLabels, renderTitle, children, StepIndicatorsComponent }) => {
  return (
    <div className="booking__panel">
      <StepIndicatorsComponent currentStep={currentStep} stepLabels={stepLabels} />
      <div className="booking__panel-frame booking__panel-frame--transparent">
        <div className="booking__panel-heading">
          <h4 className="booking__panel-title">{renderTitle(currentStep)}</h4>
        </div>
        <div className="booking__panel-body">{children}</div>
      </div>
    </div>
  );
};

export default BookingPanel;