"use client"

import { useIntl } from "react-intl"

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

import Row from "./Row"

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

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

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

export default function Table({ transactions }: TableProps) {
  const intl = 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}>
                  <Body textTransform="bold">
                    {intl.formatMessage({ id: heading })}
                  </Body>
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {transactions.map((transaction, index) => (
              <Row
                key={`${transaction.confirmationNumber}-${index}`}
                transaction={transaction}
              />
            ))}
          </tbody>
        </table>
      ) : (
        <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>
  )
}
