"use client";

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

export interface CreditHistory {
  id: number;
  date: string;
  preview: string;
  url: string;
  spent: number;
}

export const creditHistoryColumns: ColumnDef<CreditHistory>[] = [
  {
    accessorKey: "date",
    header: "Date",
  },
  {
    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={row.original.preview}
            alt="Preview"
            fill
            sizes="96px"
            className="object-cover"
          />
        </div>

        <span className="whitespace-nowrap">
          {row.original.url}
        </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.spent}
      </div>
    ),
  },
];