import React from 'react';

export type SortKey = 'name' | 'kph' | 'skills' | 'srares' | 'tkills' | 'kpr';

const SORTS: { key: SortKey; label: string }[] = [
  { key: 'name', label: 'Name' },
  { key: 'kph', label: 'KPH' },
  { key: 'skills', label: 'S.Kills' },
  { key: 'srares', label: 'S.Rares' },
  { key: 'tkills', label: 'T.Kills' },
  { key: 'kpr', label: 'KPR' },
];

interface Props {
  value: SortKey;
  onChange: (key: SortKey) => void;
}

export const SortButtons: React.FC<Props> = ({ value, onChange }) => (
  <div className="ml-sort-buttons">
    {SORTS.map(s => (
      <button
        key={s.key}
        className={`ml-sort-btn ${value === s.key ? 'active' : ''}`}
        onClick={() => onChange(s.key)}
      >
        {s.label}
      </button>
    ))}
  </div>
);