'use client'

export type CompactMetric = {
  label: string
  value: string
}

export default function CompactMetricBar({
  metrics,
  className = 'mb-4',
}: {
  metrics: CompactMetric[]
  className?: string
}) {
  if (metrics.length === 0) return null

  return (
    <div
      className={`flex flex-wrap items-center gap-x-4 gap-y-1 rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-sm text-gray-700 dark:border-gray-700 dark:bg-gray-900/40 dark:text-gray-300 ${className}`}
    >
      {metrics.map((metric) => (
        <span key={metric.label}>
          <span className="text-gray-500 dark:text-gray-400">{metric.label}:</span>{' '}
          <span className="font-medium text-gray-900 dark:text-white">{metric.value}</span>
        </span>
      ))}
    </div>
  )
}
