import { usePlatformLanguage } from "../i18n/LanguageContext";

export default function MetricCard({ label, value, tone = "neutral", detail }: { label: string; value: string | number; tone?: "neutral" | "good" | "warning" | "danger" | "info"; detail?: string }) {
  const { translateText } = usePlatformLanguage();
  const renderedValue = typeof value === "string" ? translateText(value) : value;

  return (
    <div className={`metric-card metric-${tone}`}>
      <div className="metric-label">{translateText(label)}</div>
      <div className="metric-value">{renderedValue}</div>
      {detail && <div className="metric-detail">{translateText(detail)}</div>}
    </div>
  );
}
