import React from 'react'

function cx(...parts) {
  return parts.filter(Boolean).join(' ')
}

export default function LeaderboardTabs({ items, active, onChange, sticky = false, label }) {
  return (
    <div className={cx(sticky ? 'sticky top-16 z-20' : '', 'rounded-2xl border border-white/10 bg-slate-950/85 p-2 backdrop-blur') }>
      <div className="flex flex-wrap items-center gap-2" role="tablist" aria-label={label || 'Leaderboard tabs'}>
        {items.map((item) => {
          const isActive = item.value === active

          return (
            <button
              key={item.value}
              type="button"
              role="tab"
              aria-selected={isActive}
              onClick={() => onChange(item.value)}
              className={cx(
                'rounded-full px-4 py-2 text-sm font-semibold transition',
                isActive
                  ? 'bg-sky-400 text-slate-950 shadow-[0_12px_30px_rgba(56,189,248,0.28)]'
                  : 'bg-white/5 text-slate-300 hover:bg-white/10 hover:text-white',
              )}
            >
              {item.label}
            </button>
          )
        })}
      </div>
    </div>
  )
}