'use client';

import { getStatFilters, formatStatLabel } from '@/config/statFilters';

/**
 * StatFilterPills (Session 23).
 *
 * The navigation system for the all-day intelligence layer. Sits below
 * the sport tabs and above all content. Selecting a stat narrows the
 * streaks panel, hot list, and props to that category — while schedule
 * and game lines stay visible regardless (they're game-level, not
 * stat-specific). "All" (default) shows everything.
 *
 * Controlled component: the parent owns `activeStat` and re-fetches the
 * stat-scoped panels when it changes.
 */

export interface StatFilterPillsProps {
  sport: string;
  activeStat: string;
  onChange: (stat: string) => void;
}

export default function StatFilterPills({ sport, activeStat, onChange }: StatFilterPillsProps) {
  const filters = getStatFilters(sport);
  if (filters.length <= 1) return null; // nothing to filter by

  return (
    <div
      className="stat-filters"
      role="tablist"
      aria-label="Filter by stat category"
      style={{
        display: 'flex',
        gap: 8,
        overflowX: 'auto',
        padding: '8px 0',
        WebkitOverflowScrolling: 'touch',
      }}
    >
      {filters.map((stat) => {
        const active = activeStat === stat;
        return (
          <button
            key={stat}
            role="tab"
            aria-selected={active}
            className={active ? 'active' : ''}
            onClick={() => onChange(stat)}
            style={{
              flex: '0 0 auto',
              padding: '6px 14px',
              borderRadius: 999,
              border: `1px solid ${active ? 'var(--accent, #E94B3C)' : 'var(--border, #2A2A36)'}`,
              background: active ? 'var(--accent, #E94B3C)' : 'transparent',
              color: active ? '#0A0A0F' : 'var(--text-secondary, #9A9AA8)',
              fontSize: 13,
              fontWeight: active ? 700 : 500,
              letterSpacing: '0.02em',
              cursor: 'pointer',
              whiteSpace: 'nowrap',
              transition: 'all 0.15s ease',
            }}
          >
            {formatStatLabel(stat)}
          </button>
        );
      })}
    </div>
  );
}
