"use client";

import type { ColumnDef } from "@tanstack/react-table";

export interface Transaction {
  id: number;
  date: string;
  title: string;
  amount: string;
  credits: string;
  status: "Success" | "Failed";
}

export const transactionColumns: ColumnDef<Transaction>[] = [
  {
    accessorKey: "date",
    header: "Date",
  },
  {
    accessorKey: "title",
    header: "Title",
  },
  {
    accessorKey: "amount",
    header: "Amount",
  },
  {
    accessorKey: "credits",
    header: "Credits",
    cell: ({ row }) => {
      const value = row.original.credits;

      return (
        <span
          className={
            value.startsWith("+")
              ? "text-[#00A66A]"
              : value.startsWith("-")
                ? "text-danger"
                : "text-table-text"
          }
        >
          {value}
        </span>
      );
    },
  },
  {
    accessorKey: "status",
    header: "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"
          }`}
        >
          {status}
        </span>
      );
    },
  },
];