// Metrics Bar Component
export function MetricsBar({ metrics }) {
  const entries = Object.entries(metrics);

  return `
    <div class="metrics-bar">
      ${entries.map(([label, value]) => `
        <div class="metric">
          <div class="metric__label">${label}</div>
          <div class="metric__value">${value}</div>
        </div>
      `).join('')}
    </div>
  `;
}

export function Metric({ label, value, status }) {
  const statusClass = status ? `metric__value--${status}` : '';

  return `
    <div class="metric">
      <div class="metric__label">${label}</div>
      <div class="metric__value ${statusClass}">${value}</div>
    </div>
  `;
}

export default MetricsBar;
