import type { ReactNode } from "react";
import { cn } from "@/lib/cn";
import { formatCount } from "@/lib/format";

export function formatSocialMetric(
  value: number | null | undefined,
  supported: boolean,
): { display: string; unavailable: boolean } {
  if (value !== null && value !== undefined) {
    return { display: formatCount(value), unavailable: false };
  }

  if (!supported) {
    return { display: "—", unavailable: true };
  }

  return { display: "—", unavailable: true };
}

export function SocialMetric({
  label,
  value,
  supported = true,
}: {
  label: string;
  value: number | null | undefined;
  supported?: boolean;
}) {
  const formatted = formatSocialMetric(value, supported);

  return (
    <div className="min-w-0">
      <dt className="text-[0.6875rem] font-medium uppercase tracking-[0.06em] text-ink-40">{label}</dt>
      <dd
        className={cn(
          "mt-0.5 text-[1rem] font-semibold tracking-[-0.02em] tabular-nums",
          formatted.unavailable ? "text-[0.8125rem] font-normal text-ink-40" : "text-primary",
        )}
      >
        {formatted.display}
      </dd>
    </div>
  );
}

export function SocialMetricGrid({ children }: { children: ReactNode }) {
  return (
    <dl className="grid grid-cols-2 gap-x-4 gap-y-3 sm:grid-cols-4">{children}</dl>
  );
}