58 lines
1.6 KiB
TypeScript
58 lines
1.6 KiB
TypeScript
"use client"
|
|
import { useRouter, useSearchParams } from "next/navigation"
|
|
|
|
import SelectionCard from "../SelectionCard"
|
|
|
|
import styles from "./breakfastSelection.module.css"
|
|
|
|
import type { BreakfastSelectionProps } from "@/types/components/hotelReservation/selectRate/section"
|
|
|
|
export default function BreakfastSelection({
|
|
alternatives,
|
|
nextPath,
|
|
}: BreakfastSelectionProps) {
|
|
const router = useRouter()
|
|
const searchParams = useSearchParams()
|
|
|
|
function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
|
|
e.preventDefault()
|
|
const queryParams = new URLSearchParams(searchParams)
|
|
queryParams.set("breakfast", e.currentTarget.breakfast?.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="breakfast"
|
|
value={alternative.value}
|
|
/>
|
|
<SelectionCard
|
|
title={alternative.name}
|
|
subtext={alternative.payment}
|
|
price={alternative.pricePerNight}
|
|
currency={alternative.currency}
|
|
/>
|
|
</label>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
<button type="submit" hidden>
|
|
Submit
|
|
</button>
|
|
</form>
|
|
</div>
|
|
)
|
|
}
|