"use client"
import { useIntl } from "react-intl"

import Promo from "./Promo"

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

export default function Promos() {
  const intl = useIntl()
  return (
    <div className={styles.promos}>
      <Promo
        buttonText={intl.formatMessage({ id: "View and buy add-ons" })}
        text={intl.formatMessage({
          id: "Discover the little extra touches to make your upcoming stay even more unforgettable.",
        })}
        title={intl.formatMessage({ id: "Spice things up" })}
      />
      <Promo
        buttonText={intl.formatMessage({ id: "Book another stay" })}
        text={intl.formatMessage({
          id: "Get inspired and start dreaming beyond your next trip. Explore more Scandic destinations.",
        })}
        title={intl.formatMessage({ id: "Book your next stay" })}
      />
    </div>
  )
}