"use client"

import { useIntl } from "react-intl"

import { dt } from "@/lib/dt"

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

import AwardPoints from "../../EarnAndBurn/AwardPoints"

export default function ExpiringPointsTable({
  points,
  expirationDate,
}: {
  points: number
  expirationDate: string
}) {
  const intl = useIntl()
  const lang = useLang()
  const expiration = dt(expirationDate).locale(lang).format("DD MMM YYYY")

  const tableHeadings = [
    intl.formatMessage({
      defaultMessage: "Points",
    }),
    intl.formatMessage({
      defaultMessage: "Expiration Date",
    }),
  ]

  return (
    <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>
        <Table.TR>
          <Table.TD>
            <AwardPoints awardPoints={points} isCalculated isExpiringPoints />
          </Table.TD>
          <Table.TD>{expiration}</Table.TD>
        </Table.TR>
      </Table.TBody>
    </Table>
  )
}
