import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
import { cx } from '../utils';

type BadgeVariant = 'lime' | 'ember' | 'neutral' | 'outline';

export const Badge = ({
  variant = 'neutral',
  dot,
  className,
  children,
  ...props
}: ComponentPropsWithoutRef<'span'> & {
  variant?: BadgeVariant;
  dot?: boolean;
}) => (
  <span
    className={cx(
      'modern-sk-badge',
      `modern-sk-badge--${variant}`,
      dot && 'modern-sk-badge--dot',
      className,
    )}
    {...props}
  >
    {children}
  </span>
);

export const Chip = ({
  children,
  onRemove,
}: {
  children: ReactNode;
  onRemove?: () => void;
}) => (
  <span className="modern-sk-chip">
    {children}
    {onRemove && (
      <button type="button" className="x" onClick={onRemove} aria-label="Remove">
        ×
      </button>
    )}
  </span>
);