import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"

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

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

export default function PriceContainer({
  text,
  price,
  currencyCode,
  nightsText,
  adultsText,
  childrenText,
  totalChildren = 0,
}: PriceContainerProps) {
  return (
    <div className={styles.priceContainer}>
      <div className={styles.info}>
        <Caption color="uiTextHighContrast" type="bold">
          {text}
        </Caption>
        <Caption color="uiTextHighContrast">
          {nightsText}, {adultsText}
          {totalChildren > 0 ? `, ${childrenText}` : ""}
        </Caption>
      </div>
      <div className={styles.price}>
        <Subtitle color="burgundy" type="one">
          {price} {currencyCode}
        </Subtitle>
      </div>
    </div>
  )
}