import { useEffect, useState } from 'react';

/**
 * Liefert den aktuellen View-Mode (`'desktop' | 'mobile'`) basierend auf
 * Viewport-Breite + Touch-Heuristik. Mobile = Breite < 768 px ODER
 * Touch-Primary-Pointer ohne Maus.
 */
export function useViewMode(): 'desktop' | 'mobile' {
  const [mode, setMode] = useState<'desktop' | 'mobile'>(() => _detect());

  useEffect(() => {
    const _onResize = () => setMode(_detect());
    window.addEventListener('resize', _onResize);
    return () => window.removeEventListener('resize', _onResize);
  }, []);

  return mode;
}

function _detect(): 'desktop' | 'mobile' {
  if (typeof window === 'undefined') return 'desktop';
  const isNarrow = window.matchMedia('(max-width: 768px)').matches;
  const isCoarse = window.matchMedia('(pointer: coarse)').matches;
  return isNarrow || isCoarse ? 'mobile' : 'desktop';
}