import React from 'react'
import GroupBadgePill from './GroupBadgePill'

export default function GroupLeaderboardCard({ item }) {
  if (!item?.entity) return null

  const entity = item.entity

  return (
    <article className="rounded-[26px] border border-white/10 bg-white/[0.03] p-4 shadow-[0_18px_50px_rgba(2,6,23,0.3)]">
      <div className="flex items-start gap-4">
        <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl border border-white/10 bg-slate-950/70 text-lg font-black text-white">
          #{item.rank}
        </div>
        <div className="min-w-0 flex-1">
          <div className="flex items-start justify-between gap-3">
            <div className="min-w-0">
              <a href={entity.url || '/groups'} className="block truncate text-lg font-semibold text-white transition hover:text-sky-300">{entity.name}</a>
              {entity.headline ? <p className="mt-1 text-sm text-slate-400">{entity.headline}</p> : null}
            </div>
            <div className="text-right">
              <div className="text-[11px] uppercase tracking-[0.18em] text-slate-500">Score</div>
              <div className="mt-1 text-xl font-black text-white">{Number(item.score || 0).toLocaleString()}</div>
            </div>
          </div>

          <div className="mt-3 flex flex-wrap gap-2">
            {(Array.isArray(entity.trust_signals) ? entity.trust_signals : []).slice(0, 2).map((signal) => (
              <GroupBadgePill key={signal.key} label={signal.label} tone={signal.tone} />
            ))}
            {entity.is_recruiting ? <GroupBadgePill label="Recruiting" tone="emerald" /> : null}
          </div>

          <div className="mt-4 flex flex-wrap gap-4 text-xs text-slate-400">
            <span>{Number(entity.artworks_count || 0).toLocaleString()} artworks</span>
            <span>{Number(entity.members_count || 0).toLocaleString()} members</span>
            <span>{Number(entity.followers_count || 0).toLocaleString()} followers</span>
          </div>
        </div>
      </div>
    </article>
  )
}