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

export const Button = forwardRef(function Button({ as: Tag = 'button', className, ...props }, ref) {
  return <Tag className={clsx(className, 'btn')} {...props} ref={ref} />;
});

export const ButtonGroup = forwardRef(function ButtonGroup({ as: Tag = 'span', className, ...props }, ref) {
  return <Tag className={clsx(className, 'btn-group')} {...props} ref={ref} />;
});