import React from "react";
import './TourGuideButtons.css'
interface TourGuideButtonsProps {
  currentStep: number;
  totalSteps: number;
  onPrevious: () => void;
  onNext: () => void;
  onClose: () => void;
}

export const TourGuideButtons: React.FC<TourGuideButtonsProps> = ({
  currentStep,
  totalSteps,
  onPrevious,
  onNext,
  onClose,
}) => {
  return (
    <div className="popup-buttons">
      <div className="left-buttons">
        <button
          onClick={onPrevious}
          disabled={currentStep === 0}
          className="button-previous"
        >
          Previous
        </button>
        <button onClick={onClose} className="button-skip">
          Skip
        </button>
      </div>
      <div className="right-buttons">
        <button className="count-button" disabled>
          {`${currentStep + 1} of ${totalSteps}`}
        </button>
        <button
          onClick={onNext}
          className="button-next"
        >
          {currentStep === totalSteps - 1 ? "Finish" : "Next"}
        </button>
      </div>
    </div>
  );
};