"use client"

import { useIntl } from "react-intl"

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

import Row from "./Row"

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

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

export default function ClientTable({ transactions }: ClientTableProps) {
  const intl = useIntl()

  const tableHeadings = [
    intl.formatMessage({
      defaultMessage: "Points",
    }),
    intl.formatMessage({
      defaultMessage: "Description",
    }),
    intl.formatMessage({
      defaultMessage: "Booking number",
    }),
    intl.formatMessage({
      defaultMessage: "Arrival date",
    }),
  ]

  return (
    <div className={styles.container}>
      <Table>
        <Table.THead>
          <Table.TR>
            {tableHeadings.map((heading) => (
              <Table.TH key={heading}>
                <Body textTransform="bold">{heading}</Body>
              </Table.TH>
            ))}
          </Table.TR>
        </Table.THead>
        <Table.TBody>
          {transactions.length ? (
            transactions.map((transaction, index) => (
              <Row
                key={`${transaction.confirmationNumber}-${index}`}
                transaction={transaction}
              />
            ))
          ) : (
            <Table.TR className={styles.placeholder}>
              <Table.TD colSpan={tableHeadings.length}>
                {intl.formatMessage({
                  defaultMessage: "No transactions available",
                })}
              </Table.TD>
            </Table.TR>
          )}
        </Table.TBody>
      </Table>
    </div>
  )
}
