import type { ReactNode } from "react";
import { IconClose } from "./icons.tsx";

export function Badge({ tone = "neutral", children }: { tone?: "neutral" | "success" | "error" | "warning" | "info"; children: ReactNode }) {
  return <span className={`ui-badge ui-badge--${tone}`}>{children}</span>;
}

export function Chip({ children, onRemove, removeLabel }: { children: ReactNode; onRemove(): void; removeLabel: string }) {
  return (
    <span className="ui-chip">
      {children}
      <button type="button" className="ui-chip__x" aria-label={removeLabel} title={removeLabel} onClick={onRemove}>
        <IconClose size={16} />
      </button>
    </span>
  );
}