import { ColumnDef } from "@tanstack/react-table";
import { TransactionStatusBadge } from "../components/TransactionStatusBadge";
import { Transaction } from "../types/transaction";
import { UserImage } from "../../../../ui/CustomImage";
import CustomLink from "../../../../ui/CustomLink";

export const transactionColumns: ColumnDef<Transaction>[] = [
  {
    accessorKey: "name",
    header: "Name",
    cell: ({ row }) => {
      const transaction = row.original;
      return (
        <div className="flex items-center gap-3">
          {transaction.profilePicture ? (
            <div className="h-8 w-8 overflow-hidden rounded-full shrink-0">
              <UserImage
                src={transaction.profilePicture}
                alt={transaction.name}
                className="h-full w-full object-cover"
              />
            </div>
          ) : (
            <div className="flex h-8 w-8 min-w-8 items-center justify-center rounded-full bg-slate-200 text-xs font-bold text-slate-700">
              {transaction.name.charAt(0).toUpperCase()}
            </div>
          )}
          <CustomLink href={`/admin/transactions/${transaction.userId}`}>
            <div className="flex items-center gap-3">
              <span className="font-medium underline text-link-1">
                {transaction.name}
              </span>
            </div>
          </CustomLink>
        </div>
      );
    },
  },

  {
    accessorKey: "date",
    header: "Purchased Date",
    cell: ({ row }) => <span>{row.original.date}</span>,
  },

  {
    accessorKey: "email",
    header: "Email",
    cell: ({ row }) => <span>{row.original.email}</span>,
  },

  {
    accessorKey: "title",
    header: "Package Name",
    cell: ({ row }) => <span>{row.original.title}</span>,
  },

  {
    accessorKey: "amount",
    header: "Amount Paid",
    cell: ({ row }) => <span>${row.original.amount}</span>,
  },

  {
    accessorKey: "credits",
    header: "Credits Received",
    cell: ({ row }) => <span>{row.original.credits}</span>,
  },

  {
    accessorKey: "status",
    header: "Payment Status",
    cell: ({ row }) => <TransactionStatusBadge status={row.original.status} />,
  },
];