import React from 'react'

const PILLS = [
  { key: 'uploads_count',              label: 'Artworks',    icon: 'fa-images',       tab: 'artworks' },
  { key: 'downloads_received_count',   label: 'Downloads',   icon: 'fa-download',     tab: null },
  { key: 'follower_count',             label: 'Followers',   icon: 'fa-users',        tab: 'about' },
  { key: 'following_count',            label: 'Following',   icon: 'fa-user-check',   tab: 'about' },
  { key: 'artwork_views_received_count', label: 'Views',     icon: 'fa-eye',          tab: 'stats' },
  { key: 'awards_received_count',      label: 'Awards',      icon: 'fa-trophy',       tab: 'stats' },
]

/**
 * ProfileStatsRow
 * Horizontal scrollable pill row of stat counts.
 * Clicking a pill navigates to the relevant tab.
 */
export default function ProfileStatsRow({ stats, followerCount, onTabChange }) {
  const values = {
    uploads_count:                    stats?.uploads_count ?? 0,
    downloads_received_count:         stats?.downloads_received_count ?? 0,
    follower_count:                   followerCount ?? 0,
    following_count:                  stats?.following_count ?? 0,
    artwork_views_received_count:     stats?.artwork_views_received_count ?? 0,
    awards_received_count:            stats?.awards_received_count ?? 0,
  }

  return (
    <div className="border-b border-white/10" style={{ background: 'rgba(255,255,255,0.02)' }}>
      <div className="max-w-6xl mx-auto px-4">
        <div className="grid grid-cols-3 md:grid-cols-6 gap-2 py-3">
          {PILLS.map((pill) => (
            <button
              key={pill.key}
              onClick={() => pill.tab && onTabChange(pill.tab)}
              title={pill.label}
              disabled={!pill.tab}
              className={`
                flex flex-col items-center justify-center gap-1 px-2 py-3 rounded-xl text-sm transition-all text-center
                border border-white/10 bg-white/[0.02]
                ${pill.tab
                  ? 'cursor-pointer hover:bg-white/[0.06] hover:border-white/20 hover:text-white text-slate-300 group'
                  : 'cursor-default text-slate-400 opacity-90'
                }
              `}
            >
              <i className={`fa-solid ${pill.icon} fa-fw text-xs ${pill.tab ? 'opacity-70 group-hover:opacity-100' : 'opacity-60'}`} />
              <span className="font-bold text-white tabular-nums text-base leading-none">
                {Number(values[pill.key]).toLocaleString()}
              </span>
              <span className="text-slate-500 text-[11px] uppercase tracking-wide leading-none">{pill.label}</span>
            </button>
          ))}
        </div>
      </div>
    </div>
  )
}