import { useIntl } from "react-intl"

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

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

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

export default function Row({ transaction, lang }: RowProps) {
  const { formatMessage } = useIntl()
  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")
  const values = [
    arrival,
    description,
    transaction.confirmationNumber,
    departure,
    transaction.awardPoints,
  ]
  return (
    <tr className={styles.tr}>
      {values.map((value, idx) => (
        <td key={`value-${idx}`} className={styles.td}>
          {value}
        </td>
      ))}
    </tr>
  )
}