import React, { ReactNode } from 'react';
import { cn } from '../../utils/classNames';

type TooltipSide = 'top' | 'bottom' | 'left' | 'right';

interface TooltipProps {
  label: ReactNode;
  side?: TooltipSide;
  children: ReactNode;
  className?: string;
}

const sideClasses: Record<TooltipSide, string> = {
  top: 'bottom-full left-1/2 mb-2 -translate-x-1/2',
  bottom: 'top-full left-1/2 mt-2 -translate-x-1/2',
  left: 'right-full top-1/2 mr-2 -translate-y-1/2',
  right: 'left-full top-1/2 ml-2 -translate-y-1/2',
};

/**
 * Lightweight CSS tooltip (hover + keyboard focus). Wrap any focusable trigger.
 * The bubble uses the inverted text/bg tokens so it themes automatically.
 */
const Tooltip: React.FC<TooltipProps> = ({ label, side = 'top', children, className }) => (
  <span className={cn('group/tooltip relative inline-flex', className)}>
    {children}
    <span
      role="tooltip"
      className={cn(
        'pointer-events-none absolute z-[9999] whitespace-nowrap rounded-md bg-app-text px-2.5 py-1 text-xs font-medium text-app-bg opacity-0 shadow-lg transition-opacity duration-150',
        'group-hover/tooltip:opacity-100 group-focus-within/tooltip:opacity-100',
        sideClasses[side],
      )}
    >
      {label}
    </span>
  </span>
);

export default Tooltip;