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

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

interface PriceRowProps {
  title: string
  quantity: number
  label: string
  value: string
}

export default function PriceRow({
  title,
  quantity,
  label,
  value,
}: PriceRowProps) {
  return (
    <>
      <div className={styles.column}>
        <Typography variant="Body/Paragraph/mdBold">
          <h2>{title}</h2>
        </Typography>
        <Typography variant="Body/Paragraph/mdBold">
          {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
          <p>{`×${quantity}`}</p>
        </Typography>
      </div>
      <div className={styles.column}>
        <Typography variant="Body/Paragraph/mdRegular">
          <h2 className={styles.priceText}>{label}</h2>
        </Typography>
        <Typography variant="Body/Paragraph/mdRegular">
          <h2 className={styles.priceText}>{value}</h2>
        </Typography>
      </div>
    </>
  )
}
