// src/components/weather/WeatherAverageBar.tsx
import { getAverageEmoji } from '@/lib/weather-utils';

interface WeatherEntry {
  performanceEmoji: string | null;
  moralEmoji: string | null;
  fluxEmoji: string | null;
  valueCreationEmoji: string | null;
}

interface WeatherAverageBarProps {
  entries: WeatherEntry[];
}

const AXES = [
  { key: 'performanceEmoji' as const, label: 'Performance' },
  { key: 'moralEmoji' as const, label: 'Moral' },
  { key: 'fluxEmoji' as const, label: 'Flux' },
  { key: 'valueCreationEmoji' as const, label: 'Création de valeur' },
];

export function WeatherAverageBar({ entries }: WeatherAverageBarProps) {
  if (entries.length === 0) return null;

  return (
    <div className="flex flex-wrap items-center gap-3 mt-3">
      <span className="text-xs font-medium text-muted uppercase tracking-wide">
        Moyenne équipe
      </span>
      {AXES.map(({ key, label }) => {
        const avg = getAverageEmoji(entries.map((e) => e[key]));
        return (
          <div
            key={key}
            className="flex items-center gap-1.5 rounded-full border border-border bg-card px-3 py-1"
          >
            <span className="text-lg leading-none">{avg ?? '—'}</span>
            <span className="text-xs text-muted">{label}</span>
          </div>
        );
      })}
    </div>
  );
}