import { IconButton } from "../IconButton"
import { Tooltip } from "../Tooltip"
import { Typography } from "../Typography"

import styles from "./stepper.module.css"

type StepperProps = {
  count: number
  handleOnIncrease: () => void
  handleOnDecrease: () => void
  disableIncrease: boolean
  disableDecrease: boolean
  disabledMessage?: string
}

export default function Stepper({
  count,
  handleOnIncrease,
  handleOnDecrease,
  disableIncrease,
  disableDecrease,
  disabledMessage,
}: StepperProps) {
  return (
    <div className={styles.counterContainer}>
      <IconButton
        className={styles.counterBtn}
        onPress={handleOnDecrease}
        variant="Elevated"
        isDisabled={disableDecrease}
        iconName="remove"
      />
      <div className={styles.countDisplay}>
        <Typography variant="Body/Paragraph/mdRegular">
          <p>{count}</p>
        </Typography>
      </div>
      <Tooltip
        text={disabledMessage}
        isVisible={Boolean(disabledMessage && disableIncrease)}
        position="top"
        arrow="right"
        isTouchable
      >
        <IconButton
          className={styles.counterBtn}
          onPress={handleOnIncrease}
          variant="Elevated"
          isDisabled={disableIncrease}
          iconName="add"
        />
      </Tooltip>
    </div>
  )
}