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

import { forwardRef } from '../utils/react';
import { Box } from '../box';
import * as css from './tag.css';

/*-- Types --*/

export interface TagProps extends css.TagVariants {
  startIcon?: React.ReactNode;
  endIcon?: React.ReactNode;
}

/*-- Main --*/

export const Tag = forwardRef<'div', TagProps>(function Tag(
  { className, children, startIcon, endIcon, color, ...rest },
  ref,
) {
  const hasIcon = Boolean(startIcon || endIcon);

  const cn = clsx(className, css.tag({ color }));

  return (
    <Box ref={ref} className={cn} {...rest}>
      {startIcon}
      {hasIcon ? <span>{children}</span> : children}
      {endIcon}
    </Box>
  );
});