'use client';
import type { CSSProperties, ReactNode } from 'react';

/**
 * Floating HTML tooltip anchored inside a `relative` chart container. Values lead (strong), labels follow.
 * Pass `x`/`y` in container pixels; it flips to stay inside `width`.
 */
export function ChartTooltip({
  x,
  y,
  width,
  children,
}: {
  x: number;
  y: number;
  width: number;
  children: ReactNode;
}) {
  const flip = x > width * 0.6;
  const style: CSSProperties = {
    left: flip ? undefined : x + 10,
    right: flip ? width - x + 10 : undefined,
    top: Math.max(0, y - 8),
  };
  return (
    <div
      role="status"
      aria-live="polite"
      className="pointer-events-none absolute z-10 max-w-[min(260px,80vw)] rounded-sm border border-rule bg-surface px-2.5 py-1.5 text-xs shadow-pop tnum"
      style={style}
    >
      {children}
    </div>
  );
}

export function TooltipRow({ color, label, value, muted }: { color?: string; label: string; value: string; muted?: boolean }) {
  return (
    <div className="flex items-baseline gap-2 py-0.5">
      {color ? <span aria-hidden className="inline-block h-0.5 w-3 shrink-0 self-center rounded-full" style={{ background: color }} /> : null}
      <span className={muted ? 'text-ink-3' : 'text-ink-2'}>{label}</span>
      <span className="ml-auto font-semibold text-ink">{value}</span>
    </div>
  );
}