import { Button, FlexContainer } from "@/components/shared/components"
import * as S from "./styles"

type NavigationButtonsProps = {
  isNextButtonDisabled: boolean
  isNextButtonHidden: boolean
  showResetView: boolean
  prevClick: () => void
  nextClick: () => void
  onResetClick: () => void
}

export default function NavigationButtons({
  nextClick,
  prevClick,
  isNextButtonHidden,
  isNextButtonDisabled,
  showResetView,
  onResetClick,
}: NavigationButtonsProps) {
  return (
    <S.CreateNewConsoleWrapper>
      <S.FadingEffect />

      {showResetView ? (
        <Button
          buttonType="secondary"
          style={{
            backdropFilter: "blur(4px)",
          }}
          buttonSize="L"
          onClick={onResetClick}
        >
          Start a new Trade
        </Button>
      ) : (
        <FlexContainer
          gap={0.8}
          // flexDirection="column"
          alignItems="center"
        >
          <Button
            buttonType="secondary"
            style={{
              backdropFilter: "blur(4px)",
            }}
            buttonSize="L"
            onClick={prevClick}
          >
            Previous
          </Button>

          {!isNextButtonHidden && (
            <Button
              buttonType="white"
              style={{
                backdropFilter: "blur(4px)",
              }}
              buttonSize="L"
              onClick={nextClick}
              disabled={isNextButtonDisabled}
            >
              Next
            </Button>
          )}
        </FlexContainer>
      )}
    </S.CreateNewConsoleWrapper>
  )
}