import React from 'react';
import { clsx } from 'clsx';

import { Box } from '../box';
import { forwardRef } from '../utils/react';
import * as css from './button-group.css';

export interface ButtonGroupProps extends css.Variants {}

export const ButtonGroup = forwardRef<'div', ButtonGroupProps>(
  function ButtonGroup({ className, direction = 'row', ...rest }, ref) {
    const cn = clsx(className, css.group({ direction }));

    return <Box ref={ref} className={cn} {...rest} />;
  },
);