import { PLATFORM_METRICS, formatMetricValue } from "./platformMetrics";
import type { AggregatedMetrics } from "../../hooks/usePostInsights";

interface Props {
  platformType: string;
  aggregated: AggregatedMetrics;
  postCount: number;
}

export default function AnalyticsSummaryCards({ platformType, aggregated, postCount }: Props) {
  const config = PLATFORM_METRICS[platformType];
  if (!config) return null;

  const metrics = config.summary;

  return (
    <div className={`vr-grid vr-gap-3 vr-grid-cols-2 ${metrics.length === 3 ? "sm:vr-grid-cols-3" : metrics.length <= 4 ? "sm:vr-grid-cols-4" : "sm:vr-grid-cols-3 lg:vr-grid-cols-4"}`}>
      {metrics.map((m) => (
        <div key={m.key} className="vr-text-center vr-py-4 vr-bg-gray-50 vr-rounded-lg">
          <i className={`${m.icon} vr-text-gray-300 vr-mb-1.5`} style={{ fontSize: "13px" }} />
          <p className="vr-text-xl vr-font-bold vr-text-gray-900">
            {formatMetricValue(aggregated[m.key] || 0, m.format)}
          </p>
          <p className="vr-text-xs vr-text-gray-500">{m.label}</p>
        </div>
      ))}
    </div>
  );
}