63 lines
1.5 KiB
TypeScript
63 lines
1.5 KiB
TypeScript
import Header from "@/components/Section/Header"
|
|
import { getIntl } from "@/i18n"
|
|
|
|
import SelectionCard from "../SelectionCard"
|
|
|
|
import styles from "./flexibilitySelection.module.css"
|
|
|
|
const choices = [
|
|
{
|
|
value: "non-refundable",
|
|
name: "Non refundable",
|
|
payment: "Pay now",
|
|
pricePerNight: 0,
|
|
membersPricePerNight: 0,
|
|
currency: "SEK",
|
|
},
|
|
{
|
|
value: "rebook",
|
|
name: "Free rebooking",
|
|
payment: "Pay now",
|
|
pricePerNight: 77,
|
|
membersPricePerNight: 20,
|
|
currency: "SEK",
|
|
},
|
|
{
|
|
value: "cancellation",
|
|
name: "Free cancellation",
|
|
payment: "Pay later",
|
|
pricePerNight: 132,
|
|
membersPricePerNight: 80,
|
|
currency: "SEK",
|
|
},
|
|
]
|
|
|
|
export default async function FlexibilitySelection() {
|
|
const { formatMessage } = await getIntl()
|
|
|
|
return (
|
|
<div className={styles.wrapper}>
|
|
<div className={styles.header}>
|
|
<Header title={formatMessage({ id: "Flexibility" })} subtitle={null} />
|
|
</div>
|
|
|
|
<ul className={styles.list}>
|
|
{choices.map((choice) => (
|
|
<li key={choice.value}>
|
|
<label>
|
|
<input type="radio" name="flexibility" value={choice.value} />
|
|
<SelectionCard
|
|
title={choice.name}
|
|
subtext={choice.payment}
|
|
price={choice.pricePerNight}
|
|
membersPrice={choice.membersPricePerNight}
|
|
currency={choice.currency}
|
|
/>
|
|
</label>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)
|
|
}
|