"use client"

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

import Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body"

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

import type { CounterProps } from "@/types/components/bookingWidget/guestsRoomsPicker"

export default function Counter({
  count,
  handleOnIncrease,
  handleOnDecrease,
  disableIncrease,
  disableDecrease,
}: CounterProps) {
  return (
    <div className={styles.counterContainer}>
      <Button
        className={styles.counterBtn}
        intent="inverted"
        onClick={handleOnDecrease}
        size="small"
        theme="base"
        variant="icon"
        wrapping={true}
        disabled={disableDecrease}
      >
        <MaterialIcon icon="remove" color="CurrentColor" />
      </Button>
      <Body color="baseTextHighContrast" textAlign="center">
        {count}
      </Body>
      <Button
        className={styles.counterBtn}
        onClick={handleOnIncrease}
        intent="inverted"
        variant="icon"
        theme="base"
        wrapping={true}
        size="small"
        disabled={disableIncrease}
      >
        <MaterialIcon icon="add" color="CurrentColor" />
      </Button>
    </div>
  )
}
