import type { ReactNode } from "react";
import type { BrowserRow, CellValue } from "@/lib/browser-row";

/**
 * Generic cell renderers. Callers replace any key or cell kind.
 * OnCo's table cells for molecules, flags, and domain icons are not included.
 */
export type CellRenderer = (cell: CellValue, row: BrowserRow) => ReactNode;

export function renderGenericCell(cell: CellValue): ReactNode {
  if (cell.kind === "text") return cell.text;
  if (cell.kind === "link") {
    return <a className="underline" href={cell.href}>{cell.label}</a>;
  }
  return (
    <span className="inline-flex flex-wrap gap-1">
      {cell.values.map((value) => (
        <span key={value} className="chip">{value}</span>
      ))}
    </span>
  );
}

export const genericCellRenderers: Record<string, CellRenderer> = {
  text: (cell) => renderGenericCell(cell),
  link: (cell) => renderGenericCell(cell),
  chips: (cell) => renderGenericCell(cell),
};

export function renderCell(
  key: string,
  row: BrowserRow,
  registry: Record<string, CellRenderer> = genericCellRenderers,
): ReactNode {
  const cell = row.cols[key];
  if (!cell) return null;
  const render = registry[key] ?? registry[cell.kind] ?? renderGenericCell;
  return render(cell, row);
}