'use client';

import { useIntersectionObserver } from 'use-a-hook';

export default function ChartPlaceholder() {
  const { ref, isIntersecting } = useIntersectionObserver<HTMLDivElement>({
    rootMargin: '100px',
  });
  return (
    <div ref={ref} style={{ minHeight: 180 }}>
      {isIntersecting ? (
        <p>Chart preview is in range: render the chart here.</p>
      ) : (
        <p>Chart is waiting nearby.</p>
      )}
    </div>
  );
}