import React from 'react';
import { clsx } from 'clsx';

import { forwardRef } from '../utils/react';
import { ChipBody, ChipBodyProps } from './chip-body';
import * as css from './chip-button.css';

export interface ChipButtonProps
  extends Omit<ChipBodyProps, 'startIcon' | 'endIcon'> {
  icon?: React.ReactNode;
}

export const ChipButton = forwardRef<'button', ChipButtonProps>(
  function ChipButton({ children, className, icon, ...rest }, ref) {
    return (
      <ChipBody
        {...rest}
        as="button"
        ref={ref}
        className={clsx(className, css.button)}
        startIcon={icon}
      >
        {children}
      </ChipBody>
    );
  },
);