import React from 'react';
import {
  Item,
  ToggleGroupItemProps as ItemProps,
} from '@radix-ui/react-toggle-group';
import { clsx } from 'clsx';

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

export interface ToggleGroupItemProps extends ItemProps {}

export const ToggleGroupItem = React.forwardRef<
  HTMLButtonElement,
  ToggleGroupItemProps
>(function ToggleGroupItem({ className, ...props }, ref) {
  return <Item {...props} ref={ref} className={clsx(className, css.item)} />;
});