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="bg-white/3 border-b border-white/10 overflow-x-auto" style={{ background: 'rgba(255,255,255,0.025)' }}>
      <div className="max-w-6xl mx-auto px-4">
        <div className="flex gap-1 py-2 min-w-max sm:min-w-0 sm:flex-wrap">
          {PILLS.map((pill) => (
            <button
              key={pill.key}
              onClick={() => pill.tab && onTabChange(pill.tab)}
              title={pill.label}
              disabled={!pill.tab}
              className={`
                flex items-center gap-2 px-4 py-2 rounded-lg text-sm transition-all
                ${pill.tab
                  ? 'cursor-pointer hover:bg-white/8 hover:text-white text-slate-300 group'
                  : 'cursor-default text-slate-400'
                }
              `}
              style={{ background: 'transparent' }}
            >
              <i className={`fa-solid ${pill.icon} fa-fw text-xs opacity-60 group-hover:opacity-80`} />
              <span className="font-bold text-white tabular-nums">
                {Number(values[pill.key]).toLocaleString()}
              </span>
              <span className="text-slate-500 text-xs hidden sm:inline">{pill.label}</span>
            </button>
          ))}
        </div>
      </div>
    </div>
  )
}
