import { useEffect, useState } from 'react';

export type DesktopViewport = 'tablet' | 'smallPc' | 'standardPc' | 'large2k' | 'ultra4k';

const getViewport = (width: number): DesktopViewport => {
  if (width < 1024) return 'tablet';
  if (width < 1280) return 'smallPc';
  if (width < 1920) return 'standardPc';
  if (width < 3840) return 'large2k';
  return 'ultra4k';
};

const getCurrentViewport = () => {
  if (typeof window === 'undefined') return 'standardPc';
  return getViewport(window.innerWidth);
};

export function useDesktopViewport() {
  const [viewport, setViewport] = useState<DesktopViewport>(getCurrentViewport);

  useEffect(() => {
    const handleResize = () => setViewport(getCurrentViewport());
    window.addEventListener('resize', handleResize);
    handleResize();
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return viewport;
}

export const desktopViewportClass = (viewport: DesktopViewport) => `desktop-${viewport}`;