import { ColumnDef } from "@tanstack/react-table";
import { UserActionsMenu } from "../components/UserActionsMenu";
import { UserStatusBadge } from "../components/UserStatusBadge";
import { AdminUser } from "../../../hooks/features/admin/users/useUsersFetch";
import { convertDateStringToDate } from "../../../utils/helper";

export const userColumns: ColumnDef<AdminUser>[] = [
  {
    accessorKey: "name",
    header: "Name",
    cell: ({ row }) => {
      const user = row.original;

      return (
        <div className="flex items-center gap-3">
          {/* {user.avatar ? (
            <Image
              src={user.avatar}
              alt={user.name}
              width={32}
              height={32}
              className="rounded-full"
            />
          ) : (
            <div className="flex h-8 w-8 items-center justify-center rounded-full bg-slate-200 text-sm font-medium text-slate-700">
              {user.name.charAt(0).toUpperCase()}
            </div>
          )} */}

          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-slate-200 text-sm font-medium text-slate-700">
            {user.name.charAt(0).toUpperCase()}
          </div>

          <span className="font-medium text-slate-900">{user.name}</span>
        </div>
      );
    },
  },

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

  {
    accessorKey: "phone",
    header: "Phone Number",
    cell: ({ row }) => <span className="">{row.original.phoneNumber}</span>,
  },

  {
    accessorKey: "registeredOn",
    header: "Registered On",
    cell: ({ row }) => (
      <span className="">
        {convertDateStringToDate(row.original.createdAt)}
      </span>
    ),
  },

  {
    accessorKey: "totalSpent",
    header: "Total Spent",
    cell: ({ row }) => <span className="">{row.original.totalSpent}</span>,
  },

  {
    accessorKey: "creditBalance",
    header: "Credit Balance",
    cell: ({ row }) => <span className="">{row.original.creditBalance}</span>,
  },

  {
    accessorKey: "status",
    header: "Status",
    cell: ({ row }) => (
      <UserStatusBadge
        status={row.original.isActive ? "Active" : "Inactive"}
        key={row.original.uuid}
      />
    ),
  },

  {
    id: "actions",
    header: "Actions",
    enableSorting: false,
    cell: ({ row }) => {
      const user = row.original;
      return <UserActionsMenu user={user} />;
    },
  },
];