"use client";

interface PostAnalyticsData {
  impressions: number;
  clicks: number;
  shares: number;
  comments: number;
  reactions: number;
}

interface PostMetricsBadgeProps {
  analytics: PostAnalyticsData[];
  averages: { engagementRate: number } | null;
}

export function PostMetricsBadge({ analytics, averages }: PostMetricsBadgeProps) {
  if (!analytics || analytics.length === 0) {
    return (
      <span className="text-[11px] text-gray-400 italic">Gathering data...</span>
    );
  }

  const totalImpressions = analytics.reduce((sum, a) => sum + a.impressions, 0);
  const totalEngagements = analytics.reduce(
    (sum, a) => sum + a.reactions + a.comments + a.shares,
    0
  );
  const engagementRate = totalImpressions > 0 ? totalEngagements / totalImpressions : 0;

  const diff = averages && averages.engagementRate > 0
    ? ((engagementRate - averages.engagementRate) / averages.engagementRate) * 100
    : null;

  return (
    <div className="flex flex-wrap items-center gap-2 text-[11px]">
      <span className="text-gray-500">
        {totalImpressions.toLocaleString()} impressions
      </span>
      <span className="text-gray-400">|</span>
      <span className="text-gray-500">
        {(engagementRate * 100).toFixed(1)}% engagement
      </span>
      {diff !== null && (
        <>
          <span className="text-gray-400">|</span>
          <span
            className={`font-medium ${
              diff >= 0 ? "text-green-600" : "text-red-500"
            }`}
          >
            {diff >= 0 ? "+" : ""}
            {diff.toFixed(0)}% vs avg
          </span>
        </>
      )}
    </div>
  );
}