import { cva, VariantProps } from 'class-variance-authority';

import { Icon } from '../iconography';
import './tag.css';

type TagStylesProps = VariantProps<typeof tagStyles>;
const tagStyles = cva('c-tag', {
  variants: {
    variant: {
      default: 'c-tag-default',
      elevate: 'c-tag-elevate',
    },
    size: {
      xxs: 'c-tag-xxs',
      xs: 'c-tag-xs',
      sm: 'c-tag-sm',
      md: 'c-tag-md',
      lg: 'c-tag-lg',
    },
  },
  defaultVariants: {
    variant: 'default',
    size: 'xs',
  },
});

export type TagProps = React.ComponentProps<'div'> &
  TagStylesProps & {
    prepend?: React.ReactNode;
    onRemove?: () => void;
  };

export function Tag({ children, className, variant, size, prepend, onRemove, ...delegated }: TagProps) {
  return (
    <div className={tagStyles({ className, variant, size })} {...delegated}>
      {!prepend ? null : <span className="c-tag__prepend">{prepend}</span>}
      {children}
      {onRemove && (
        <button
          type="button"
          className="c-tag__remove-button"
          onClick={e => {
            e.stopPropagation();
            onRemove();
          }}
        >
          <Icon.Cancel width={12} height={12} />
          <span className="c-tag__remove-button-text">Remove</span>
        </button>
      )}
    </div>
  );
}
