'use client';

import * as Tooltip from '@radix-ui/react-tooltip';
import type { ReactElement } from 'react';

type NavTooltipProps = {
  label: string;
  children: ReactElement;
  /** 窄轨叶子项可设 0，与原先即时提示接近 */
  delayDuration?: number;
  side?: 'top' | 'right' | 'bottom' | 'left';
};

/**
 * 侧栏图标/收起态等：替代原生 `title`，统一键盘可达与延时（受全局 TooltipProvider 影响可被 Root 覆盖）。
 */
export function NavTooltip({ label, children, delayDuration = 300, side = 'right' }: NavTooltipProps) {
  if (!label.trim()) {
    return children;
  }

  return (
    <Tooltip.Root delayDuration={delayDuration}>
      <Tooltip.Trigger asChild>{children}</Tooltip.Trigger>
      <Tooltip.Portal>
        <Tooltip.Content
          side={side}
          sideOffset={6}
          className="z-[300] max-w-[min(280px,calc(100vw-16px))] rounded-md bg-neutral-900 px-2.5 py-1.5 text-xs font-medium text-white shadow-lg"
        >
          {label}
          <Tooltip.Arrow className="fill-neutral-900" />
        </Tooltip.Content>
      </Tooltip.Portal>
    </Tooltip.Root>
  );
}