import type { CodePointSpan } from 'source-region';
import { spanLabel } from './format';
import type { HoverTarget } from './types';

export function SpanChip(props: {
  label: string;
  span: CodePointSpan;
  onHover: (target: HoverTarget | undefined) => void;
}) {
  return (
    <button
      class="span-chip"
      type="button"
      onMouseEnter={() => props.onHover({ label: props.label, span: props.span })}
      onMouseLeave={() => props.onHover(undefined)}
    >
      <span>{props.label}</span>
      <span>{spanLabel(props.span)}</span>
    </button>
  );
}