"use client"

import { useIntl } from "react-intl"

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

import { useBookingConfirmationStore } from "../../../stores/booking-confirmation"

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

export function PaymentDetails() {
  const intl = useIntl()

  const { rooms, formattedTotalCost } = useBookingConfirmationStore(
    (state) => ({
      rooms: state.rooms,
      formattedTotalCost: state.formattedTotalCost,
    })
  )

  const hasAllRoomsLoaded = rooms.every((room) => room)
  return (
    <div className={styles.details}>
      <Typography variant="Title/Subtitle/md">
        <h2>
          {intl.formatMessage({
            id: "bookingConfirmation.paymentDetails",
            defaultMessage: "Payment details",
          })}
        </h2>
      </Typography>
      <div className={styles.payment}>
        {hasAllRoomsLoaded ? (
          <Typography variant="Body/Paragraph/mdRegular">
            <p>
              {intl.formatMessage(
                {
                  id: "bookingConfirmation.totalCost",
                  defaultMessage: "Total cost: {amount}",
                },
                {
                  amount: formattedTotalCost,
                }
              )}
            </p>
          </Typography>
        ) : (
          <SkeletonShimmer width="100%" />
        )}
      </div>
    </div>
  )
}