// config/columns.config.jsx
// Column definitions and pinning config for the Users table.

import { Badge } from "@/components/ui/badge";
import { Clock } from "lucide-react";
import { buildColumns } from "@/utils/table.util";
import { buildSelectionColumn } from "@/components/generic/Table/buildSelectionColumn";
import { buildRowActionsColumn } from "@/components/generic/Table/buildRowActionsColumn";
import { formatDuration } from "@/utils/timestamp.util";

export const columnPinning = {
  right: ["actions"],
  left: [],
};

// ─── Custom cell overrides ────────────────────────────────────────────────────
const cellOverrides = {
  duration_seconds: (info) => {
    const seconds = parseInt(info.getValue() ?? 0, 10);

    return (
      <div className="flex items-center gap-1.5">
        <Clock className="h-3.5 w-3.5 text-muted-foreground" />
        <Badge variant="secondary" className="text-xs font-medium tabular-nums">
          {formatDuration(seconds)}
        </Badge>
      </div>
    );
  },
};

/**
 * Builds the full column array for the Users table.
 *
 * @param {Array}    attributes  Field definitions from the server (drives data columns)
 * @param {Array}    rowActions  Row-level kebab action definitions
 * @returns {Array}              TanStack column definitions
 */
export function buildDataColumns(attributes, rowActions) {
  const visibleAttributes = attributes.filter((a) => !a.hidden);

  return [
    buildSelectionColumn(),
    ...buildColumns(visibleAttributes, { cellOverrides }),
    buildRowActionsColumn(rowActions, { dropdownLabel: "Lesson Actions" }),
  ];
}