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>
  )
}