'use client';

import { useExplainMode } from '@/contexts/ExplainModeContext';

interface ExplainTooltipProps {
  explanation: string;
  children: React.ReactNode;
  inline?: boolean;
}

// Wraps an element. When Explain Mode is on, renders a small annotation
// directly below `children` describing what the wrapped element means.
// When off, renders children unchanged with no DOM cost.

export default function ExplainTooltip({ explanation, children, inline = false }: ExplainTooltipProps) {
  const { explainMode } = useExplainMode();

  if (!explainMode) return <>{children}</>;

  const wrapperTag = inline ? 'span' : 'div';
  const Wrapper = wrapperTag as 'span';
  return (
    <Wrapper className="explain-wrap" style={{ display: inline ? 'inline-block' : 'block' }}>
      {children}
      <span
        role="note"
        className="explain-tip"
        style={{
          display: 'block',
          marginTop: 6,
          padding: '6px 10px',
          fontSize: 12,
          fontFamily: 'var(--font-mono, monospace)',
          color: 'var(--text-secondary)',
          background: 'rgba(0, 212, 160, 0.10)',
          border: '1px solid rgba(0, 212, 160, 0.30)',
          borderRadius: 6,
          lineHeight: 1.4,
        }}
      >
        <span aria-hidden="true" style={{ marginRight: 6, opacity: 0.7 }}>?</span>
        {explanation}
      </span>
    </Wrapper>
  );
}