import React from 'react';
import { useHeaderMetrics } from '../../context/HeaderMetricsContext';

export const HeaderMetrics: React.FC = () => {
  const { metrics } = useHeaderMetrics();
  
  if (!metrics || metrics.length === 0) return null;

  return (
    <div className="igny8-header-metrics hidden lg:flex">
      {metrics.map((metric, index) => (
        <React.Fragment key={index}>
          <div className="igny8-header-metric">
            <div className={`igny8-header-metric-accent ${metric.accentColor}`}></div>
            <span className="igny8-header-metric-label">{metric.label}</span>
            <span className="igny8-header-metric-value">
              {typeof metric.value === 'number' ? metric.value.toLocaleString() : metric.value}
            </span>
          </div>
          {index < metrics.length - 1 && <div className="igny8-header-metric-separator"></div>}
        </React.Fragment>
      ))}
    </div>
  );
};

