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

import SelectionCard from "../SelectionCard"

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

const choices = [
  {
    value: "no",
    name: "No breakfast",
    payment: "Always cheeper to get it online",
    pricePerNight: 0,
    currency: "SEK",
  },
  {
    value: "buffe",
    name: "Breakfast buffé",
    payment: "Always cheeper to get it online",
    pricePerNight: 150,
    currency: "SEK",
  },
]

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

  return (
    <div className={styles.wrapper}>
      <div className={styles.header}>
        <Header
          title={formatMessage({ id: "Breakfast" })}
          subtitle={formatMessage({
            id: "Do you want to start the day with Scandics famous breakfast buffé?",
          })}
        />
      </div>

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