import React from 'react'

export default function WorldAnalyticsSummaryCard({ label, value, hint = '', tone = 'default' }) {
  const toneClass = tone === 'accent'
    ? 'border-sky-300/20 bg-sky-400/10 text-sky-100'
    : tone === 'emerald'
      ? 'border-emerald-300/20 bg-emerald-400/10 text-emerald-100'
      : 'border-white/10 bg-black/20 text-white'

  return (
    <div className={`rounded-[22px] border px-4 py-4 ${toneClass}`}>
      <div className="text-[11px] font-semibold uppercase tracking-[0.16em] opacity-75">{label}</div>
      <div className="mt-3 text-2xl font-semibold tracking-[-0.03em]">{value}</div>
      {hint ? <div className="mt-2 text-sm leading-6 opacity-80">{hint}</div> : null}
    </div>
  )
}