50 lines
1.2 KiB
TypeScript
50 lines
1.2 KiB
TypeScript
"use client"
|
|
|
|
import { useFormContext } from "react-hook-form"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
|
|
|
import Counter from "../Counter"
|
|
|
|
import styles from "./adult-selector.module.css"
|
|
|
|
import type { SelectorProps } from "@/types/components/bookingWidget/guestsRoomsPicker"
|
|
|
|
export default function AdultSelector({
|
|
roomIndex = 0,
|
|
currentAdults,
|
|
}: SelectorProps) {
|
|
const name = `rooms.${roomIndex}.adults`
|
|
const intl = useIntl()
|
|
const adultsLabel = intl.formatMessage({ id: "Adults" })
|
|
const { setValue } = useFormContext()
|
|
|
|
function increaseAdultsCount() {
|
|
if (currentAdults < 6) {
|
|
setValue(name, currentAdults + 1)
|
|
}
|
|
}
|
|
|
|
function decreaseAdultsCount() {
|
|
if (currentAdults > 1) {
|
|
setValue(name, currentAdults - 1)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<section className={styles.container}>
|
|
<Caption color="uiTextHighContrast" type="bold">
|
|
{adultsLabel}
|
|
</Caption>
|
|
<Counter
|
|
count={currentAdults}
|
|
handleOnDecrease={decreaseAdultsCount}
|
|
handleOnIncrease={increaseAdultsCount}
|
|
disableDecrease={currentAdults == 1}
|
|
disableIncrease={currentAdults == 6}
|
|
/>
|
|
</section>
|
|
)
|
|
}
|