import { useIntl } from "react-intl"

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

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({ transactions }: TableProps) {
  const intl = useIntl()

  return (
    <div className={styles.container}>
      {transactions.length ? (
        <div>
          <table className={styles.table}>
            <thead className={styles.thead}>
              <tr>
                {tableHeadings.map((heading) => (
                  <th key={heading} className={styles.th}>
                    <Body textTransform="bold">
                      {intl.formatMessage({ id: heading })}
                    </Body>
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {transactions.map((transaction, idx) => (
                <Row
                  key={`${transaction.confirmationNumber}-${idx}`}
                  transaction={transaction}
                />
              ))}
            </tbody>
          </table>
        </div>
      ) : (
        <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}>
                {intl.formatMessage({ id: "No transactions available" })}
              </td>
            </tr>
          </tbody>
        </table>
      )}
    </div>
  )
}
