55 lines
1.5 KiB
TypeScript
55 lines
1.5 KiB
TypeScript
"use client"
|
|
import { useRouter, useSearchParams } from "next/navigation"
|
|
|
|
import SelectionCard from "../SelectionCard"
|
|
|
|
import styles from "./bedSelection.module.css"
|
|
|
|
import type { BedSelectionProps } from "@/types/components/hotelReservation/selectRate/section"
|
|
|
|
export default function BedSelection({
|
|
alternatives,
|
|
nextPath,
|
|
}: BedSelectionProps) {
|
|
const router = useRouter()
|
|
const searchParams = useSearchParams()
|
|
|
|
function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
|
|
e.preventDefault()
|
|
const queryParams = new URLSearchParams(searchParams)
|
|
queryParams.set("bed", e.currentTarget.bed?.value)
|
|
router.push(`${nextPath}?${queryParams}`)
|
|
}
|
|
|
|
return (
|
|
<div className={styles.wrapper}>
|
|
<form
|
|
method="GET"
|
|
action={`${nextPath}?${searchParams}`}
|
|
onSubmit={handleSubmit}
|
|
>
|
|
<ul className={styles.list}>
|
|
{alternatives.map((alternative) => (
|
|
<li key={alternative.value}>
|
|
<label>
|
|
<input type="radio" name="bed" value={alternative.value} />
|
|
<SelectionCard
|
|
title={alternative.name}
|
|
subtext={`(${alternative.payment})`}
|
|
price={alternative.pricePerNight}
|
|
membersPrice={alternative.membersPricePerNight}
|
|
currency={alternative.currency}
|
|
/>
|
|
</label>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
<button type="submit" hidden>
|
|
Submit
|
|
</button>
|
|
</form>
|
|
</div>
|
|
)
|
|
}
|