"use client"

import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"

import styles from "./counter.module.css"
import { IconButton } from "@scandic-hotels/design-system/IconButton"
import { Typography } from "@scandic-hotels/design-system/Typography"

type CounterProps = {
  count: number
  handleOnIncrease: () => void
  handleOnDecrease: () => void
  disableIncrease: boolean
  disableDecrease: boolean
}

export default function Counter({
  count,
  handleOnIncrease,
  handleOnDecrease,
  disableIncrease,
  disableDecrease,
}: CounterProps) {
  return (
    <div className={styles.counterContainer}>
      <IconButton
        className={styles.counterBtn}
        onClick={handleOnDecrease}
        theme="Inverted"
        style="Elevated"
        isDisabled={disableDecrease}
      >
        <MaterialIcon icon="remove" color="CurrentColor" />
      </IconButton>
      <Typography variant="Body/Paragraph/mdRegular">
        <p>{count}</p>
      </Typography>
      <IconButton
        className={styles.counterBtn}
        onClick={handleOnIncrease}
        theme="Inverted"
        style="Elevated"
        isDisabled={disableIncrease}
      >
        <MaterialIcon icon="add" color="CurrentColor" />
      </IconButton>
    </div>
  )
}