import React from 'react';
import { useIntersectionObserver } from '../../hooks/useIntersectionObserver';

export interface VisibilityTrackedCardProps {
  itemKey: string;
  element: React.ReactElement;
  onObserved: () => void;
}

export const VisibilityTrackedCard: React.FC<VisibilityTrackedCardProps> = ({
  itemKey,
  element,
  onObserved,
}) => {
  const { elementRef } = useIntersectionObserver(onObserved);
  return React.cloneElement(element, {
    key: itemKey,
    ref: elementRef,
  });
};