"use client";

import Image from "next/image";
import type { ColumnDef } from "@tanstack/react-table";
import { UserViewCreditHistory } from "../../../../../hooks/features/admin/users/useUserDetail";
import { convertDateStringToDate } from "../../../../../utils/helper";

export const creditHistoryColumns: ColumnDef<UserViewCreditHistory>[] = [
  {
    accessorKey: "date",
    header: "Date",
    cell: ({ row }) => (
      <span>{convertDateStringToDate(row.original.createdAt)}</span>
    ),
  },
  {
    accessorKey: "preview",
    header: "Preview",
    cell: ({ row }) => (
      <div className="flex min-w-65 items-center gap-3">
        <div className="relative h-11 w-25 shrink-0 overflow-hidden rounded-md">
          <Image
            src={"/images/history-2.jpg"}
            alt="Preview"
            fill
            sizes="96px"
            className="object-cover"
          />
        </div>

        <span className="whitespace-nowrap">{"pinterest.com/pin/8827"}</span>
      </div>
    ),
  },
  {
    accessorKey: "spent",
    header: "Spent",
    cell: ({ row }) => (
      <div className="flex items-center gap-2 ">
        <span className="">
          <Image
            src="/images/credits-icon.svg"
            alt="Credits Icon"
            width={20}
            height={20}
            className="h-5 w-5 object-contain"
          />
        </span>
        {row.original.credits}
      </div>
    ),
  },
];
