import React from 'react';
import { useHeaderMetrics } from '../../context/HeaderMetricsContext';
import { Tooltip } from '../ui/tooltip/Tooltip';
import { InfoIcon } from '../../icons';

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

  return (
    <div className="igny8-header-metrics flex">
      {metrics.map((metric, index) => {
        const metricElement = (
          <div className={`igny8-header-metric ${metric.tooltip ? 'cursor-help' : ''}`}>
            <div className={`igny8-header-metric-accent ${metric.accentColor}`}></div>
            <span className="igny8-header-metric-label text-xs flex items-center gap-1">
              {metric.label}
              {metric.tooltip && (
                <InfoIcon className="w-3 h-3 text-gray-400 dark:text-gray-500" />
              )}
            </span>
            <span className="igny8-header-metric-value">
              {typeof metric.value === 'number' ? metric.value.toLocaleString() : metric.value}
            </span>
          </div>
        );

        return (
          <React.Fragment key={index}>
            {metric.tooltip ? (
              <Tooltip text={metric.tooltip} placement="bottom">
                {metricElement}
              </Tooltip>
            ) : (
              metricElement
            )}
            {index < metrics.length - 1 && <div className="igny8-header-metric-separator"></div>}
          </React.Fragment>
        );
      })}
    </div>
  );
};

