import { useIntl } from "react-intl"

import Row from "./Row"

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

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

const tableHeadings = [
  "Arrival date",
  "Description",
  "Booking number",
  "Transaction date",
  "Points",
]

export default function DesktopTable({ lang, transactions }: TableProps) {
  const { formatMessage } = useIntl()
  return (
    <div className={styles.container}>
      {transactions.length ? (
        <table className={styles.table}>
          <thead className={styles.thead}>
            <tr>
              {tableHeadings.map((heading) => (
                <th key={heading} className={styles.th}>
                  {formatMessage({ id: heading })}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {transactions.map((transaction) => (
              <Row
                lang={lang}
                key={transaction.confirmationNumber}
                transaction={transaction}
              />
            ))}
          </tbody>
        </table>
      ) : (
        // TODO: add once pagination is available through API
        // <Button
        // disabled={isFetching}
        // intent="primary"
        // bgcolor="white"
        // type="button"
        // onClick={loadMoreData}
        // >
        // {formatMessage({id:"See more transactions"})}
        // </Button>
        <table className={styles.table}>
          <thead className={styles.thead}>
            <tr>
              {tableHeadings.map((heading) => (
                <th key={heading} className={styles.th}>
                  {heading}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            <tr>
              <td colSpan={tableHeadings.length} className={styles.placeholder}>
                {formatMessage({ id: "No transactions available" })}
              </td>
            </tr>
          </tbody>
        </table>
      )}
    </div>
  )
}
