import { useState, useEffect } from 'react';
import { ArrowSize } from '../types';
import { Helpers } from '../services/helpers';

interface UseArrowSizeProps {
  width: number;
  isMobile: boolean;
  disabled?: boolean;
}

export const useArrowSize = ({
  width,
  isMobile,
  disabled = false,
}: UseArrowSizeProps): ArrowSize => {
  const [arrowSize, setArrowSize] = useState<ArrowSize>('medium');

  useEffect(() => {
    if (disabled || isMobile) {
      setArrowSize('medium'); // Default size for mobile or when disabled
      return;
    }

    const calculateSize = () => {
      const newSize = Helpers.calculateArrowSize(width);
      setArrowSize(newSize);
    };

    calculateSize();
  }, [width, isMobile, disabled]);
  return arrowSize;
};

export default useArrowSize;