import { Fragment, type ReactNode } from "react";

import { TermDetail } from "@/components/public/term-detail";
import type { CatalogTextNode } from "@/lib/catalog/lunaris";

function renderNodes(nodes: CatalogTextNode[]): ReactNode {
  return nodes.map((node, index) => {
    if (node.type === "text") return <Fragment key={index}>{node.value}</Fragment>;
    const children = renderNodes(node.children);
    if (node.type === "color") {
      return <span key={index} style={{ color: node.value }}>{children}</span>;
    }
    if (!node.detail) return <Fragment key={index}>{children}</Fragment>;
    return (
      <TermDetail
        key={index}
        label={children}
        title={node.detail.name}
        detail={node.detail.description}
        showIcon={false}
      />
    );
  });
}

export function LunarisText({
  nodes,
  fallback,
}: {
  nodes?: CatalogTextNode[];
  fallback: string;
}) {
  return <>{nodes?.length ? renderNodes(nodes) : fallback}</>;
}