import Header from "@/components/Section/Header"
import { getIntl } from "@/i18n"

import SelectionCard from "../SelectionCard"

import styles from "./bedSelection.module.css"

const choices = [
  {
    value: "queen",
    name: "Queen bed",
    payment: "160 cm",
    pricePerNight: 0,
    membersPricePerNight: 0,
    currency: "SEK",
  },
  {
    value: "king",
    name: "King bed",
    payment: "160 cm",
    pricePerNight: 0,
    membersPricePerNight: 0,
    currency: "SEK",
  },
  {
    value: "twin",
    name: "Twin bed",
    payment: "90 cm + 90 cm",
    pricePerNight: 82,
    membersPricePerNight: 67,
    currency: "SEK",
  },
]

export default async function BedSelection() {
  const { formatMessage } = await getIntl()

  return (
    <div className={styles.wrapper}>
      <div className={styles.header}>
        <Header
          title={formatMessage({ id: "Choose type of bed" })}
          subtitle={formatMessage({ id: "How do you want to sleep?" })}
        />
        <p>
          {formatMessage({
            id: "All our beds are from Bliss, allowing you to adjust the firmness for your perfect comfort.",
          })}
        </p>
      </div>

      <ul className={styles.list}>
        {choices.map((choice) => (
          <li key={choice.value}>
            <label>
              <input type="radio" name="bed" value={choice.value} />
              <SelectionCard
                title={choice.name}
                subtext={`(${choice.payment})`}
                price={choice.pricePerNight}
                membersPrice={choice.membersPricePerNight}
                currency={choice.currency}
              />
            </label>
          </li>
        ))}
      </ul>
    </div>
  )
}