import {
  HintHeadless,
  HintHotspotHeadless,
  HintTooltipHeadless,
} from '@tour-kit/hints/headless';

function CustomHint() {
  return (
    <HintHeadless
      id="feature-hint"
      target="#new-feature"
      content="Check out this new feature!"
      render={({
        isOpen,
        targetRect,
        hotspotRef,
        position,
        tooltipPlacement,
        content,
        dismiss,
        targetElement,
      }) => (
        <>
          <HintHotspotHeadless
            ref={hotspotRef}
            targetRect={targetRect}
            position={position}
            isOpen={isOpen}
            render={({ position: pos }) => (
              <button
                className="custom-pulse-dot"
                style={{
                  position: 'fixed',
                  top: pos.top,
                  left: pos.left,
                }}
              >
                <span className="dot" />
              </button>
            )}
          />

          {isOpen && targetElement && (
            <HintTooltipHeadless
              target={targetElement}
              placement={tooltipPlacement}
              onClose={dismiss}
              render={({ floatingStyles, refs, getFloatingProps }) => (
                <div
                  ref={refs.setFloating}
                  style={floatingStyles}
                  className="custom-tooltip"
                  {...getFloatingProps()}
                >
                  <p>{content}</p>
                  <button onClick={dismiss}>Got it</button>
                </div>
              )}
            />
          )}
        </>
      )}
    />
  );
}

// Render prop pattern
<HintHeadless
  render={(props) => <CustomUI {...props} />}
/>

// Props include:
// - isOpen, isDismissed
// - show, hide, dismiss
// - targetElement, targetRect
// - position, tooltipPlacement
// - content

<HintHeadless
  id="my-hint"
  target="#element"
  render={(props) => (
    <>
      <HintHotspotHeadless {...} />
      {props.isOpen && <HintTooltipHeadless {...} />}
    </>
  )}
/>

<HintHotspotHeadless
  targetRect={rect}
  position="top-right"
  isOpen={isOpen}
  onClick={toggle}
/>

<HintTooltipHeadless
  target={element}
  placement="bottom"
  onClose={close}
>
  <MyTooltipContent />
</HintTooltipHeadless>