// 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
  // The English meaning of the same token read as a word of the writer's own
  // language, when it is one. On a Latin-script pair "sale" is both, and the
  // bubble shows the two readings stacked rather than picking one — the same
  // both-directions rule the word card follows, in one line less space.
  reverse?: string
  // How the writer's language names itself, to label the second line.
  reverseLang?: string
  style: React.CSSProperties
}

export function GlossTip({ gloss, reverse, reverseLang, 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}
      {reverse && (
        <span className="mt-0.5 block" style={{ opacity: 0.72, fontSize: '0.85em' }}>
          {reverseLang ? `${reverseLang}: ` : ''}
          {reverse}
        </span>
      )}
    </div>
  )
}