import React from 'react';

import classnames from 'classnames';
import './RulePill.scss';

export interface RulePillProps extends React.HTMLAttributes<HTMLDivElement> {
  className?: string;
  isActive?: boolean;
  ref?: React.Ref<HTMLDivElement>;
  value?: React.ReactNode;
}

export const RulePill: React.FC<RulePillProps> = React.forwardRef((props, forwardRef) => {
  const {
    children,
    className,
    isActive,
    value,
    ...otherProps
  } = props;

  const classNames = classnames(className, {
    'rule-pill__active': isActive,
    'rule-pill': true,
  });

  return (
    <div
      className={classNames}
      {...otherProps}
      ref={forwardRef}
    >
      {children || value}
    </div>
  );
});
