import * as React from 'react';
import {
  BaseToggleGroup,
  BaseToggleGroupItem,
  type BaseToggleGroupItemProps,
  type BaseToggleGroupProps,
  baseToggleGroupVariants,
} from './BaseToggleGroup';

import { cn } from '../..';

import styles from './ToggleGroup.module.css';

const toggleGroupVariants = baseToggleGroupVariants;

function ToggleGroup(props: BaseToggleGroupProps) {
  return (
    <BaseToggleGroup
      className={cn(styles.ToggleGroup, toggleGroupVariants)}
      {...props}
    />
  );
}

function ToggleGroupItem(props: BaseToggleGroupItemProps) {
  return (
    <BaseToggleGroupItem
      className={cn(styles.ToggleGroupItem, toggleGroupVariants)}
      {...props}
    />
  );
}

export { ToggleGroup, ToggleGroupItem, toggleGroupVariants };
