"use client"
import { useIntl } from "react-intl"

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

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

interface PriceAndDateProps {
  checkInDate: string
  checkOutDate: string
  label: string
  price: string
  striked?: boolean
}

export default function PriceAndDate({
  checkInDate,
  checkOutDate,
  label,
  price,
  striked = false,
}: PriceAndDateProps) {
  const intl = useIntl()

  const checkInMsg = intl.formatMessage({
    defaultMessage: "Check-in",
  })
  const checkOutMsg = intl.formatMessage({
    defaultMessage: "Check-out",
  })

  return (
    <div className={styles.container}>
      <div className={styles.item}>
        <Typography variant="Body/Paragraph/mdBold">
          <p className={styles.textDefault}>{label}</p>
        </Typography>
        <Typography variant="Body/Paragraph/mdBold">
          <p className={styles.textSecondary}>{price}</p>
        </Typography>
      </div>
      <div className={styles.item}>
        <Typography variant="Body/Paragraph/mdRegular">
          <p className={styles.textSecondary}>{checkInMsg}</p>
        </Typography>
        <Typography variant="Body/Paragraph/mdRegular">
          <p className={styles.textDefault}>
            {striked ? <s>{checkInDate}</s> : checkInDate}
          </p>
        </Typography>
      </div>
      <div className={styles.item}>
        <Typography variant="Body/Paragraph/mdRegular">
          <p className={styles.textSecondary}>{checkOutMsg}</p>
        </Typography>
        <Typography variant="Body/Paragraph/mdRegular">
          <p className={styles.textDefault}>
            {striked ? <s>{checkOutDate}</s> : checkOutDate}
          </p>
        </Typography>
      </div>
    </div>
  )
}
