"use client";

import type { ColumnDef } from "@tanstack/react-table";
import { PaymentTransaction } from "../../../../../hooks/features/admin/users/useUserDetail";
import {
  convertDateStringToDate,
  formatStringWithUppercase,
} from "../../../../../utils/helper";

export const transactionColumns: ColumnDef<PaymentTransaction>[] = [
  {
    accessorKey: "date",
    header: "Purchase Date",
    cell: ({ row }) => {
      return (
        <span className={"text-table-text"}>
          {convertDateStringToDate(row.original.createdAt)}
        </span>
      );
    },
  },
  {
    accessorKey: "packageName",
    header: "Package Purchased",
    cell: ({ row }) => (
      <span className={"text-table-text"}>{row.original.packageName}</span>
    ),
  },
  {
    accessorKey: "amount",
    header: "Amount Paid",
    cell: ({ row }) => (
      <span className={"text-table-text"}>${row.original.amount}</span>
    ),
  },
  {
    accessorKey: "credits",
    header: "Credits Received",
    cell: ({ row }) => {
      const value = row.original.credits;

      return <span className={"text-table-text"}>{value}</span>;
    },
  },
  {
    accessorKey: "status",
    header: "Payment Status",
    cell: ({ row }) => {
      const status = row.original.status;

      return (
        <span
          className={`inline-flex rounded-full px-3 py-1 text-sm font-medium ${
            status === "success"
              ? "bg-[#DDFBEF] text-[#00A66A]"
              : "bg-danger-light text-danger"
          }`}
        >
          {formatStringWithUppercase(status)}
        </span>
      );
    },
  },
];