import { renderAttrs } from "./attribute.js";
import type { BlockHandler } from "./handler.type.js";

/** Handler for `router-slot` fenced code blocks. */
export function createRouterSlotHandler(): BlockHandler {
  return {
    render(_raw: string, attrs?: Record<string, string>): string {
      return `<router-slot${renderAttrs(attrs)}></router-slot>`;
    },

    serialize(raw: string, attrs?: Record<string, string>): string {
      const content =
        raw ||
        (attrs && Object.keys(attrs).length > 0
          ? JSON.stringify(
              Object.fromEntries(
                Object.entries(attrs).map(([k, v]) => {
                  const num = Number(v);
                  return [k, Number.isNaN(num) ? v : num];
                }),
              ),
              null,
              2,
            )
          : "");
      return `\`\`\`router-slot\n${content}\n\`\`\``;
    },
  };
}