import type { HTMLAttributes, ReactElement, ReactNode } from "react";
import type { Tone } from "../../types/domain";

interface StateTagProps extends HTMLAttributes<HTMLSpanElement> {
  tone: Tone | string;
  children: ReactNode;
  id?: string;
  title?: string;
}

export function StateTag({ tone, children, id, title, className, ...attributes }: StateTagProps): ReactElement {
  return <span id={id} title={title} className={`state-tag tone-${tone}${className ? ` ${className}` : ""}`} {...attributes}>{children}</span>;
}
