import { renderHook, act } from '@testing-library/react';
import { describe, it, expect, beforeEach } from 'vitest';
import useViewportMode from './useViewportMode';

describe('useViewportMode', () => {
  beforeEach(() => {
    window.innerWidth = 800;
  });

  it('returns mobile when width < 1024', () => {
    window.innerWidth = 1023;
    const { result } = renderHook(() => useViewportMode());
    expect(result.current).toBe('mobile');
  });

  it('returns desktop when width >= 1024', () => {
    window.innerWidth = 1024;
    const { result } = renderHook(() => useViewportMode());
    expect(result.current).toBe('desktop');
  });

  it('updates on resize', () => {
    window.innerWidth = 800;
    const { result } = renderHook(() => useViewportMode());
    expect(result.current).toBe('mobile');
    act(() => {
      window.innerWidth = 1200;
      window.dispatchEvent(new Event('resize'));
    });
    expect(result.current).toBe('desktop');
  });
});