'use client';
import clsx from 'clsx';
import { forwardRef, useImperativeHandle, useState } from 'react';
import { Each } from '../../00-base';
/**
 * ButtonGroup component renders a group of buttons.
 *
 * @component
 * @example
 * const items = [
 *   { label: 'Button 1', onClick: () => console.log('Button 1 clicked') },
 *   { label: 'Button 2', onClick: () => console.log('Button 2 clicked') },
 * ];
 * return <ButtonGroup items={items} defaultButton={0} />;
 *
 * @param {Object} props - The component props.
 * @param {TItem[]} props.items - An array of items, each containing a label and an onClick handler.
 * @param {defaultButton} props.defaultButton - An optional property that enables the button you want once, but doesn't call the action
 * @returns {ReactNode} The rendered ButtonGroup component.
 */
export const ButtonGroup = forwardRef(function ({ items, defaultButton, className }, ref) {
    const [active, setActive] = useState(defaultButton);
    const reset = () => {
        setActive(undefined);
    };
    useImperativeHandle(ref, () => ({
        reset,
    }));
    return (<div className={clsx('flex flex-row items-center', className)}>
        <Each of={items} render={({ label, onClick }, index) => {
            const handleClick = () => {
                setActive(index);
                onClick();
            };
            return (<button key={label} disabled={active === index} className={clsx('border-gray-3 hover:bg-gray-5 flex-1 border-y border-r px-4 py-2 transition-colors disabled:border-black disabled:bg-black disabled:text-white', index === 0 && 'rounded-l-md border-l', index === items.length - 1 && 'rounded-r-md')} onClick={handleClick}>
                {label}
              </button>);
        }}/>
      </div>);
});
ButtonGroup.displayName = 'ButtonGroup';
//# sourceMappingURL=ButtonGroup.jsx.map