import React from 'react';

const CSS = `
.ct-tooltip-wrap { position: relative; display: inline-flex; }
.ct-tooltip {
  position: absolute; bottom: calc(100% + 7px); left: 50%;
  transform: translateX(-50%) translateY(2px);
  background: var(--ink-1);
  color: var(--ink-inverse);
  font: 500 12px/1.4 var(--font-sans);
  padding: 5px 9px;
  border-radius: var(--radius-1);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
  z-index: 50;
}
.ct-tooltip--bottom { bottom: auto; top: calc(100% + 7px); transform: translateX(-50%) translateY(-2px); }
.ct-tooltip-wrap:hover .ct-tooltip,
.ct-tooltip-wrap:focus-within .ct-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.ct-tooltip code { font: 500 11px var(--font-mono); }
`;
(function inject() {
  if (typeof document !== 'undefined' && !document.getElementById('ct-tooltip-css')) {
    const s = document.createElement('style'); s.id = 'ct-tooltip-css'; s.textContent = CSS;
    document.head.appendChild(s);
  }
})();

export function Tooltip({ content, side = 'top', children, style }) {
  return (
    <span className="ct-tooltip-wrap" style={style}>
      {children}
      <span className={`ct-tooltip${side === 'bottom' ? ' ct-tooltip--bottom' : ''}`} role="tooltip">
        {content}
      </span>
    </span>
  );
}