frontend/src/components/ModelInfo.jsx

import React from "react";

export default function ModelStructure({ structure }) {
  if (!structure) return null;

  const items = {
    model_type: "Model Type",
    hidden_size: "Hidden Size",
    num_attention_heads: "Number of Attention Heads",
    num_hidden_layers: "Number of Hidden Layers",
    image_size: "Image Size",
    intermediate_size: "Intermediate Size",
    patch_size: "Patch Size",
    vocab_size: "Vocab Size",
  }

  // Find which keys in structure match our interest list
  const matched = Object.keys(items).filter((k) => k in structure && !!structure[k]);

  return (
    <div className="max-h-[500px] overflow-y-auto bg-slate-50 rounded-xl p-4 border border-slate-200 shadow-inner">
      {matched.length === 0 ? (
        <pre className="text-sm text-slate-800 whitespace-pre-wrap">{structure.model_type}</pre>
      ) : (
        <div className="flex flex-wrap gap-2">
          {matched.map((k) => (
            <div
              key={k}
              className="bg-sky-100 border border-sky-300 text-sky-900 text-sm px-3 py-1 rounded-full flex items-center gap-3 shadow-sm"
            >
              <div className="font-medium">{items[k]}:</div>
              <div className="text-sky-700">{String(structure[k])}</div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}