'use client';

import { cn } from '@djangocfg/ui-core/lib';

import { METHOD_FILTERS, type MethodFilter } from './types';

interface MethodChipsProps {
    value: MethodFilter;
    onChange: (v: MethodFilter) => void;
}

/** Horizontal filter strip. Scrolls horizontally on narrow widths
 *  rather than wrapping to a second line — the toolbar stays a fixed
 *  height so the endpoint list below gets every pixel it can.
 *
 *  Active chips use a solid fill (not the outlined-with-tint style
 *  from the old design) so "this filter is on" reads at a glance
 *  without the eye having to resolve subtle border colour shifts. */
export function MethodChips({ value, onChange }: MethodChipsProps) {
    return (
        <div className="flex items-center gap-1 overflow-x-auto -mx-1 px-1 pb-px">
            {METHOD_FILTERS.map((m) => {
                const active = value === m;
                return (
                    <button
                        key={m}
                        type="button"
                        onClick={() => onChange(m)}
                        aria-pressed={active}
                        className={cn(
                            'shrink-0 px-2 h-6 rounded font-mono text-[10px] font-semibold tracking-wide uppercase transition-colors',
                            active
                                ? 'bg-foreground text-background'
                                : 'text-muted-foreground/70 hover:text-foreground hover:bg-muted',
                        )}
                    >
                        {m}
                    </button>
                );
            })}
        </div>
    );
}
