frontend/src/components/ExampleMetadata.tsx

import React from 'react'

interface ExampleMetadataProps {
  metadata: Record<string, string | number | boolean>
}

const ExampleMetadata: React.FC<ExampleMetadataProps> = ({ metadata }) => (
  <fieldset className="fieldset w-full p-4 rounded border border-gray-700 bg-base-200 mt-6">
    <legend className="fieldset-legend font-semibold">Example Info</legend>
    <div className="flex flex-wrap gap-x-6 gap-y-2 text-xs">
      {Object.entries(metadata).map(([k, v]) => (
        <div key={k} className="flex items-center">
          <span className="font-mono">{k}</span>: {String(v)}
        </div>
      ))}
    </div>
  </fieldset>
)

export default ExampleMetadata