import React from 'react';

import { forwardRef } from '../utils/react';
import { ChipBody, ChipBodyProps } from './chip-body';
import { ChipClose } from './chip-close';

export interface ChipTextProps
  extends Omit<ChipBodyProps, 'startIcon' | 'endIcon'> {
  closable?: boolean;
  onClose?: () => void;
  icon?: React.ReactNode;
}

export const ChipText = forwardRef<'div', ChipTextProps>(function ChipText(
  { as = 'div', children, closable, onClose, disabled, icon, ...rest },
  ref,
) {
  const shouldDisplayClose = !disabled && closable;

  return (
    <ChipBody
      {...rest}
      as={as}
      ref={ref}
      startIcon={icon}
      disabled={disabled}
      endIcon={shouldDisplayClose && <ChipClose onClick={onClose} />}
    >
      {children}
    </ChipBody>
  );
});