import { _ } from "@/lib/translation"

import Button from "@/components/TempDesignSystem/Button"

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

const EarnAndBurn = () => {
  return (
    <div className={styles.container}>
      <table className={styles.table}>
        <thead className={styles.thead}>
          <tr>
            <th className={styles.th}>{_("Arrival date")}</th>
            <th className={styles.th}>{_("Description")}</th>
            <th className={styles.th}>{_("Booking number")}</th>
            <th className={styles.th}>{_("Transaction date")}</th>
            <th className={styles.th}>{_("Points")}</th>
          </tr>
        </thead>
        <tbody>
          <tr className={styles.tr}>
            <td className={styles.td}>23 May 2023</td>
            <td className={styles.td}>Scandic Mölndal, Mölndal 2 nights</td>
            <td className={styles.td}>5123456576</td>
            <td className={styles.td}>26 May 2023</td>
            <td className={styles.td}>30000</td>
          </tr>
          <tr className={styles.tr}>
            <td className={styles.td}>23 May 2023</td>
            <td className={styles.td}>Scandic Mölndal, Mölndal 2 nights</td>
            <td className={styles.td}>5123456576</td>
            <td className={styles.td}>26 May 2023</td>
            <td className={styles.td}>-30000</td>
          </tr>
        </tbody>
      </table>
      <Button intent="primary" bgcolor="white" type="button">
        {_("See more transactions")}
      </Button>
    </div>
  )
}

export default EarnAndBurn