import React from 'react';

import ToggleButton, { ToggleButtonProps } from '@mui/material/ToggleButton';

import { bem } from 'utils/bem';

import { THEME } from '../../constants';

import styles from './segment-button.scss';

const segmentClassName = bem(styles, 'segment-button');

interface SegmentButtonProps<T> {
  value: T;
  theme?: THEME;
  disabled?: boolean;
  className?: string;
  children: React.ReactNode;
  dataAttributes?: Record<`data-${string}`, string>;
}

export const SegmentButton = React.forwardRef(
  <T extends number | string>(
    { theme = THEME.light, className, children, dataAttributes, ...otherProps }: SegmentButtonProps<T>,
    forwardedRef: React.ForwardedRef<HTMLButtonElement>,
  ) => (
    <ToggleButton
      {...dataAttributes}
      ref={forwardedRef}
      disableRipple
      className={segmentClassName(null, { [theme]: true }, className)}
      {...(otherProps as ToggleButtonProps)}
    >
      {children}
    </ToggleButton>
  ),
);

SegmentButton.displayName = 'SegmentButton';