"use client"

import { useIntl } from "react-intl"

import { dt } from "@scandic-hotels/common/dt"
import Table from "@scandic-hotels/design-system/Table"
import { Typography } from "@scandic-hotels/design-system/Typography"

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({ id: "common.points", defaultMessage: "Points" }),
    intl.formatMessage({
      id: "points.expiringPointsTable.expirationDate",
      defaultMessage: "Expiration Date",
    }),
  ]

  return (
    <Table>
      <Table.THead>
        <Table.TR>
          {tableHeadings.map((heading) => (
            <Table.TH key={heading}>
              <Typography variant="Body/Paragraph/mdBold">
                <p>{heading}</p>
              </Typography>
            </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>
  )
}