import Button from "@/components/Low/Button";
import clsx from "clsx";

interface Props {
  handlePrevious: () => void;
  handleNext: () => void;
  hidePrevious?: boolean;
  nextLabel?: string;
  isLoading?: boolean;
  isDisabled?: boolean;
  previousDisabled?: boolean;
  nextDisabled?: boolean;
  previousLoading?: boolean;
  nextLoading?: boolean;
}

const ProgressButtons: React.FC<Props> = ({
  handlePrevious,
  handleNext,
  hidePrevious = false,
  isLoading = false,
  isDisabled = false,
  previousDisabled = false,
  nextDisabled = false,
  previousLoading = false,
  nextLoading = false,
  nextLabel = "Next Page"
}) => {
  return (
    <div className={clsx("flex w-full gap-8", !hidePrevious ? "justify-between" : "flex-row-reverse")}>
      {!hidePrevious && (
        <Button
          disabled={isDisabled || previousDisabled}
          isLoading={isLoading || previousLoading}
          color="purple"
          variant="outline"
          onClick={handlePrevious}
          className="max-w-[200px] w-full"
        >
          Previous Page
        </Button>
      )}
      <Button
        disabled={isDisabled || nextDisabled}
        isLoading={isLoading || nextLoading}
        color="purple"
        onClick={handleNext}
        className="max-w-[200px] self-end w-full"
      >
        {nextLabel}
      </Button>
    </div>
  );
};

export default ProgressButtons;