import { useViewerStore } from '../../store/viewerStore';

export function PartTooltip() {
  const hoveredPart = useViewerStore((state) => state.hoveredPart);

  if (!hoveredPart) {
    return null;
  }

  return (
    <div
      className="pointer-events-none fixed z-[70] max-w-[260px] rounded-xl border border-sky-300/30 bg-[#0B0E14]/92 px-3 py-2 text-xs text-slate-100 shadow-2xl shadow-black/40 backdrop-blur-md"
      style={{
        left: hoveredPart.clientX + 14,
        top: hoveredPart.clientY + 14
      }}
    >
      <div className="font-semibold text-white">{hoveredPart.name}</div>
      <div className="mt-1 font-mono text-[10px] uppercase tracking-[0.16em] text-sky-300">
        Click for engineering detail
      </div>
    </div>
  );
}