1import cx from '@src/cx.mjs';
2
3export function ButtonGroup({ value, onChange, items, wrap = false }) {
4  return (
5    <div className={cx('flex max-w-lg space-x-0 text-xs', wrap && 'flex-wrap')}>
6      {Object.entries(items).map(([key, label], i, arr) => (
7        <button
8          key={key}
9          id={key}
10          onClick={() => onChange(key)}
11          className={cx(
12            'px-2 border-b-2 h-8 whitespace-nowrap border-box max-h-8 hover:opacity-50',
13            // i === 0 && 'rounded-l-md',
14            // i === arr.length - 1 && 'rounded-r-md',
15            // value === key ? 'bg-background' : 'bg-lineHighlight',
16            value === key ? 'border-foreground' : 'border-transparent',
17          )}
18        >
19          {label.toLowerCase()}
20        </button>
21      ))}
22    </div>
23  );
24}