import { useIntl } from "react-intl"

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

import AwardPoints from "@/components/MyPages/Blocks/Points/EarnAndBurn/JourneyTable/Desktop/Row/AwardPoints"
import Body from "@/components/TempDesignSystem/Text/Body"
import { getLang } from "@/i18n/serverContext"

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

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

export default function MobileTable({ transactions }: TableProps) {
  const intl = useIntl()

  return (
    <div className={styles.container}>
      <table className={styles.table}>
        <thead className={styles.thead}>
          <tr>
            <Body asChild>
              <th className={styles.th}>
                {intl.formatMessage({ id: "Transactions" })}
              </th>
            </Body>
            <Body asChild>
              <th className={styles.th}>
                {intl.formatMessage({ id: "Points" })}
              </th>
            </Body>
          </tr>
        </thead>
        <tbody>
          {transactions.length ? (
            transactions.map((transaction, idx) => (
              <tr
                className={styles.tr}
                key={`${transaction.confirmationNumber}-${idx}`}
              >
                <td className={`${styles.td} ${styles.transactionDetails}`}>
                  <span className={styles.transactionDate}>
                    {dt(transaction.checkinDate)
                      .locale(getLang())
                      .format("DD MMM YYYY")}
                  </span>
                  {transaction.hotelName && transaction.city ? (
                    <span>{`${transaction.hotelName}, ${transaction.city}`}</span>
                  ) : null}
                  <span>
                    {`${transaction.nights} ${intl.formatMessage({ id: transaction.nights === 1 ? "night" : "nights" })}`}
                  </span>
                </td>
                <AwardPoints awardPoints={transaction.awardPoints} />
              </tr>
            ))
          ) : (
            <tr>
              <td className={styles.placeholder} colSpan={2}>
                {intl.formatMessage({
                  id: "There are no transactions to display",
                })}
              </td>
            </tr>
          )}
        </tbody>
      </table>
    </div>
  )
}
