import BlazeSlider, { BlazeConfig } from 'blaze-slider';
import { useEffect, useRef } from 'react';

export function useBlazeSlider(config: BlazeConfig | undefined): {
  elRef: React.RefObject<any>;
  sliderRef: React.RefObject<BlazeSlider | undefined>;
} {
  const sliderRef = useRef<BlazeSlider | undefined>();
  const elRef = useRef<any>();

  useEffect(() => {
    // if not already initialized
    if (!sliderRef.current) {
      sliderRef.current = new BlazeSlider(elRef?.current, config) || '';
    }
  }, []);

  return { elRef, sliderRef };
}