import { dt } from "@/lib/dt"

import { getIntl } from "@/i18n"

import AwardPoints from "./AwardPoints"

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

import type { RowProps } from "@/types/components/myPages/myPage/earnAndBurn"

export default async function Row({ transaction, lang }: RowProps) {
  const { formatMessage } = await getIntl()
  const description =
    transaction.hotelName && transaction.city
      ? `${transaction.hotelName}, ${transaction.city} ${transaction.nights} ${formatMessage({ id: "nights" })}`
      : `${transaction.nights} ${formatMessage({ id: "nights" })}`
  const arrival = dt(transaction.checkinDate).locale(lang).format("DD MMM YYYY")
  const departure = dt(transaction.checkoutDate)
    .locale(lang)
    .format("DD MMM YYYY")
  return (
    <tr className={styles.tr}>
      <td className={styles.td}>{arrival}</td>
      <td className={styles.td}>{description}</td>
      <td className={styles.td}>{transaction.confirmationNumber}</td>
      <td className={styles.td}>{departure}</td>
      <AwardPoints awardPoints={transaction.awardPoints} />
    </tr>
  )
}