import React from "react";

interface JsonDataFormatterProps {
  data: Record<string, any>;
}

export const JsonDataFormatter: React.FC<JsonDataFormatterProps> = ({
  data,
}) => {
  if (!data || typeof data !== "object") {
    return <span className="text-gray-400">Sin contenido disponible</span>;
  }

  // Claves técnicas que decidimos ignorar para no ensuciar la vista del usuario
  const ignoredKeys = ["id", "created_at", "updated_at", "deleted_at"];

  return (
    <div className="flex flex-wrap gap-2 p-2 rounded-lg bg-zinc-900/50 max-w-3xl">
      {Object.entries(data).map(([key, value]) => {
        // Ignoramos si la clave es técnica o si el valor está completamente vacío
        if (
          ignoredKeys.includes(key.toLowerCase()) ||
          value === null ||
          value === ""
        ) {
          return null;
        }

        // Formateamos el texto de la clave para que sea legible (ej: "idviewType" -> "Idview Type")
        const formattedKey = key
          .replace(/([A-Z])/g, " $1")
          .replace(/^./, (str) => str.toUpperCase())
          .trim();

        // Convertimos booleanos a texto entendible
        let displayValue = String(value);
        if (typeof value === "boolean") {
          displayValue = value ? "Sí" : "No";
        }

        return (
          <div
            key={key}
            className="flex items-center space-x-1 bg-zinc-800/80 px-2.5 py-1 rounded-md border border-zinc-700/40 text-xs shadow-sm"
          >
            <span className="font-semibold text-blue-400">{formattedKey}:</span>
            <span
              className="text-zinc-200 truncate max-w-xs"
              title={displayValue}
            >
              {displayValue}
            </span>
          </div>
        );
      })}
    </div>
  );
};