import { useIntl } from "react-intl"

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

import Body from "@/components/TempDesignSystem/Text/Body"

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

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

export default function MobileTable({ lang, transactions }: TableProps) {
  const { formatMessage } = useIntl()
  return (
    <div className={styles.container}>
      <table className={styles.table}>
        <thead className={styles.thead}>
          <tr>
            <Body asChild>
              <th className={styles.th}>
                {formatMessage({ id: "Transactions" })}
              </th>
            </Body>
            <Body asChild>
              <th className={styles.th}>{formatMessage({ id: "Points" })}</th>
            </Body>
          </tr>
        </thead>
        <tbody>
          {transactions.length ? (
            transactions.map((transaction) => (
              <tr className={styles.tr} key={transaction.confirmationNumber}>
                <td className={`${styles.td} ${styles.transactionDetails}`}>
                  <span className={styles.transactionDate}>
                    {dt(transaction.checkinDate)
                      .locale(lang)
                      .format("DD MMM YYYY")}
                  </span>
                  {transaction.hotelName && transaction.city ? (
                    <span>{`${transaction.hotelName}, ${transaction.city}`}</span>
                  ) : null}
                  <span>
                    {`${transaction.nights} ${formatMessage({ id: transaction.nights === 1 ? "night" : "nights" })}`}
                  </span>
                </td>
                <td
                  className={`${styles.mobileTd} ${styles.transactionPoints}`}
                >
                  {`${transaction.awardPoints} P`}
                </td>
              </tr>
            ))
          ) : (
            <tr>
              <td className={styles.placeholder} colSpan={2}>
                {formatMessage({ id: "Empty" })}
              </td>
            </tr>
          )}
        </tbody>
      </table>
    </div>
  )
}
