import React from "react";

function formatValue(v) {
  if (typeof v === "number") {
    return v.toLocaleString(undefined, { maximumFractionDigits: 2 });
  }
  return String(v);
}

export default function NumberView({ results, config, tableName }) {
  const value = results?.value ?? 0;
  const label = results?.label ?? (config?.aggregation || "COUNT").toUpperCase();

  return (
    <div
      style={{
        flex: 1,
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        padding: 20,
        gap: 8,
        overflow: "hidden",
      }}
    >
      <span
        style={{
          fontSize: 11,
          color: "var(--text-dim)",
          textTransform: "uppercase",
          letterSpacing: "0.1em",
        }}
      >
        {label}
      </span>
      <span
        style={{
          fontSize: 48,
          fontWeight: 700,
          color: "var(--cyan)",
          lineHeight: 1.1,
          textAlign: "center",
          wordBreak: "break-all",
        }}
      >
        {formatValue(value)}
      </span>
      <span
        style={{
          fontSize: 10,
          color: "var(--text-dim)",
          opacity: 0.6,
        }}
      >
        {tableName}
      </span>
    </div>
  );
}
