import React from "react";

interface NavButtonsProps {
  onPrev: () => void;
  onNext: () => void;
  isFirstStep: boolean;
  isNextDisabled: boolean;
}

export default function NavButtons({
  onPrev,
  onNext,
  isFirstStep,
  isNextDisabled,
}: NavButtonsProps) {
  const baseStyle =
    "fixed top-[44%] z-50 p-2 h-20 flex items-center justify-center align-middle";

  return (
    <>
      <button
        type="button"
        onClick={onPrev}
        className={`left-[0.5%] md:left-[1%] ${baseStyle}`}
      >
        <i
          className="icon-[solar--arrow-left-broken]"
          style={{ width: 24, height: 24 }}
        />
      </button>
      <button
        type="button"
        onClick={onNext}
        disabled={isNextDisabled}
        aria-disabled={isNextDisabled}
        className={`right-[0.5%] ${baseStyle} ${isNextDisabled ? "cursor-not-allowed opacity-40" : "cursor-pointer"}`}
        aria-label="Next step"
      >
        <i
          className="icon-[solar--arrow-right-broken]"
          style={{ width: 24, height: 24 }}
        />
      </button>
    </>
  );
}