'use client';

/* EngagementSortChips — phase 07 (ENG-04).
 * Purpose: 3-chip sort selector (Hours/Name/Utilization). Same chip styling as period chips.
 *          Maps to /api/engagement/users sort/order params per D-20.
 * Props: value, onChange. Pure presentational. */

export type EngagementSortKey = 'hours' | 'name' | 'utilization';

export interface EngagementSortChipsProps {
  value: EngagementSortKey;
  onChange: (next: EngagementSortKey) => void;
}

const SORTS: ReadonlyArray<{ key: EngagementSortKey; label: string }> = [
  { key: 'hours',       label: 'Hours' },
  { key: 'name',        label: 'Name' },
  { key: 'utilization', label: 'Utilization' },
];

export function EngagementSortChips({ value, onChange }: EngagementSortChipsProps) {
  return (
    <div className="flex gap-2 items-center min-h-[44px]">
      {SORTS.map(({ key, label }) => {
        const isActive = key === value;
        return (
          <button
            key={key}
            type="button"
            role="button"
            aria-pressed={isActive}
            onClick={() => { if (!isActive) onChange(key); }}
            className={
              isActive
                ? 'bg-primary text-primary-foreground rounded-full px-3 py-1.5 text-[10px] font-semibold'
                : 'bg-muted text-foreground hover:bg-muted/80 rounded-full px-3 py-1.5 text-[10px] font-semibold'
            }
          >
            {label}
          </button>
        );
      })}
    </div>
  );
}