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

import { Typography } from "@scandic-hotels/design-system/Typography"

import { useMyStayStore } from "@/stores/my-stay"

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

export default function Info() {
  const intl = useIntl()
  const text = intl.formatMessage({ defaultMessage: "Booking number" })

  const { address, confirmationNumber, hotelName, phoneNumber } =
    useMyStayStore((state) => ({
      address: state.hotel.address,
      confirmationNumber: state.bookedRoom.confirmationNumber,
      hotelName: state.hotel.name,
      phoneNumber: state.hotel.contactInformation.phoneNumber,
    }))

  return (
    <div className={styles.container}>
      <div className={styles.booking}>
        <Typography variant="Tag/sm">
          <span className={styles.text}>{text}</span>
        </Typography>
        <Typography variant="Title/sm">
          <span className={styles.confirmationNumber}>
            {confirmationNumber}
          </span>
        </Typography>
      </div>
      <Typography variant="Body/Supporting text (caption)/smRegular">
        <div className={styles.address}>
          <span>{hotelName}</span>
          <span>{address.streetAddress}</span>
          <span>{address.city}</span>
          <span>{phoneNumber}</span>
        </div>
      </Typography>
    </div>
  )
}
