import { useIntl } from "react-intl"

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

import styles from "./adult-selector.module.css"

import { AdultSelectorProps } from "@/types/components/bookingWidget/guestsRoomsPicker"

export default function AdultSelector({
  adults = 1,
  updateAdults = (count: number) => {},
}: AdultSelectorProps) {
  const intl = useIntl()
  const adultsLabel = intl.formatMessage({ id: "Adults" })

  function decreaseAdults() {
    if (adults > 1) {
      updateAdults(adults - 1)
    }
  }
  function increaseAdults() {
    if (adults < 6) {
      updateAdults(adults + 1)
    }
  }

  return (
    <section className={styles.container}>
      <Caption>{adultsLabel}</Caption>
      <Button onClick={decreaseAdults} intent="text" size="small">
        -
      </Button>
      <span className={styles.textCenter}>{adults}</span>
      <Button onClick={increaseAdults} intent="text" size="small">
        +
      </Button>
    </section>
  )
}