import React from 'react'

function formatNumber(value) {
  return new Intl.NumberFormat('en-US').format(Number(value || 0))
}

function formatPercent(value) {
  return `${Math.round(Number(value || 0) * 100)}%`
}

export default function WorldAnalyticsChallengePanel({ challenge = {} }) {
  if (!challenge?.linked_challenge_id) {
    return null
  }

  const cards = [
    ['Challenge CTA clicks', challenge.challenge_cta_clicks, 'number'],
    ['Recap clicks', challenge.recap_clicks, 'number'],
    ['Entry clicks', challenge.entry_clicks, 'number'],
    ['Winner clicks', challenge.winner_clicks, 'number'],
    ['Finalist clicks', challenge.finalist_clicks, 'number'],
    ['Total challenge clicks', challenge.total_clicks, 'number'],
    ['Submission starts', challenge.submission_starts, 'number'],
    ['Created submissions', challenge.submissions_created, 'number'],
    ['Click-to-submit', challenge.click_to_submission_conversion, 'percent'],
  ]

  return (
    <div className="rounded-[24px] border border-white/10 bg-black/20 p-5">
      <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Challenge-linked engagement</div>
      <div className="mt-4 grid gap-3 md:grid-cols-2 xl:grid-cols-3">
        {cards.map(([label, value, type]) => (
          <div key={label} className="rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-3">
            <div className="text-[11px] font-semibold uppercase tracking-[0.14em] text-slate-500">{label}</div>
            <div className="mt-2 text-xl font-semibold text-white">{type === 'percent' ? formatPercent(value) : formatNumber(value)}</div>
          </div>
        ))}
      </div>
    </div>
  )
}