"use client"

import { useIntl } from "react-intl"

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

import useLang from "@/hooks/useLang"

import AwardPoints from "./AwardPoints"

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

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

export default function Row({ transaction }: RowProps) {
  const intl = useIntl()
  const lang = useLang()
  const description =
    transaction.hotelName && transaction.city
      ? `${transaction.hotelName}, ${transaction.city} ${transaction.nights} ${intl.formatMessage({ id: "nights" })}`
      : `${transaction.nights} ${intl.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>
  )
}