web/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/PriceContainer/index.tsx

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

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

interface PriceContainerProps {
  adultsText: string
  childrenText: string
  nightsText: string
  price: string
  text: string
  totalChildren?: number
}

export default function PriceContainer({
  adultsText,
  childrenText,
  nightsText,
  price,
  text,
  totalChildren = 0,
}: PriceContainerProps) {
  return (
    <div className={styles.priceContainer}>
      <div className={styles.info}>
        <Typography variant="Body/Supporting text (caption)/smBold">
          <p>{text}</p>
        </Typography>
        <Typography variant="Body/Supporting text (caption)/smRegular">
          <p>
            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
            {nightsText}, {adultsText}
            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
            {totalChildren > 0 ? `, ${childrenText}` : ""}
          </p>
        </Typography>
      </div>
      <div className={styles.wrapper}>
        <Typography variant="Title/Subtitle/md">
          <p>{price}</p>
        </Typography>
      </div>
    </div>
  )
}