import Caption from "@scandic-hotels/design-system/Caption"
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}>
        <Caption color="uiTextHighContrast" type="bold">
          {text}
        </Caption>
        <Caption color="uiTextHighContrast">
          {/* 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}` : ""}
        </Caption>
      </div>
      <div className={styles.wrapper}>
        <Typography variant="Title/Subtitle/md">
          <p>{price}</p>
        </Typography>
      </div>
    </div>
  )
}