// GlossTip is the inline hover gloss: rest the pointer on an English word and a
// small bubble shows its Chinese meaning, pulled instantly from the offline
// gloss dataset. It's a pure reading aid — pointer-events are off so it never
// steals hover or blocks a click, and it sits just under the word. Bilingual
// chrome elsewhere puts zh first; here the gloss IS the content (the word is
// already on screen), so the bubble shows only the 中文.

interface Props {
  gloss: string
  style: React.CSSProperties
}

export function GlossTip({ gloss, style }: Props) {
  return (
    <div
      className="petal-gloss-tip pointer-events-none absolute z-20 px-2.5 py-1.5 text-sm"
      role="tooltip"
      style={{
        maxWidth: 280,
        background: 'var(--color-plum)',
        color: 'var(--color-surface)',
        borderRadius: 'var(--radius-input)',
        boxShadow: 'var(--shadow-soft)',
        lineHeight: 1.35,
        fontFamily: "'Nunito','PingFang SC','Microsoft YaHei','Noto Sans CJK SC',sans-serif",
        ...style,
      }}
    >
      {gloss}
    </div>
  )
}