import { useEffect } from 'react';
import { useFocusable, UseFocusableConfig } from '@noriginmedia/norigin-spatial-navigation';
import { useInputMode } from '../context/InputModeContext';

export const useFocusableAutoScroll = (config?: UseFocusableConfig) => {
  const result = useFocusable(config);
  const { mode } = useInputMode();
  
  useEffect(() => {
    if (mode === 'gamepad' && result.focused && result.ref.current) {
      result.ref.current.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
    }
  }, [result.focused, mode]);

  return {
    ...result,
    focused: mode === 'gamepad' ? result.focused : false
  };
};
