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

import { ChipContent } from './chip-content';
import { forwardRef } from '../utils/react';
import { Box } from '../box';
import * as css from './chip-body.css';

export interface ChipBodyProps extends css.ChipVariants {
  startIcon?: React.ReactNode;
  endIcon?: React.ReactNode;
  children: React.ReactNode;
  className?: string;
}

export const ChipBody = forwardRef<'div', ChipBodyProps>(function ChipBody(
  {
    as = 'div',
    children,
    startIcon,
    endIcon,
    border,
    className,
    customHover,
    ...rest
  },
  ref,
) {
  return (
    <Box
      {...rest}
      className={clsx(
        css.chip({ disabled: rest.disabled, customHover, border }),
        className,
      )}
      as={as}
      ref={ref}
    >
      {startIcon}
      <ChipContent withIcon={!!startIcon}>{children}</ChipContent>
      {endIcon}
    </Box>
  );
});