import React from 'react';
import {
  Root,
  ToggleGroupImplProps as RootProps,
  ToggleGroupSingleProps,
  ToggleGroupMultipleProps,
} from '@radix-ui/react-toggle-group';
import { clsx } from 'clsx';

import * as css from './toggle-group.css';

export interface ToggleGroupProps extends RootProps {}

export const ToggleGroup = React.forwardRef<
  HTMLDivElement,
  (ToggleGroupSingleProps | ToggleGroupMultipleProps) & ToggleGroupProps
>(function ToggleGroup({ className, ...props }, ref) {
  return <Root {...props} ref={ref} className={clsx(className, css.group)} />;
});