'use client'

import { useEffect, useState } from 'react'

export interface ResponsiveBreakpoints {
  mobile: number
  tablet: number
  desktop: number
}

export const DEFAULT_BREAKPOINTS: ResponsiveBreakpoints = {
  mobile: 768,
  tablet: 1024,
  desktop: 1280,
}

export type ViewMode = 'mobile' | 'tablet' | 'desktop'

export function useResponsive(breakpoints: ResponsiveBreakpoints = DEFAULT_BREAKPOINTS) {
  const [viewMode, setViewMode] = useState<ViewMode>('desktop')
  const [windowWidth, setWindowWidth] = useState<number>(0)

  useEffect(() => {
    const handleResize = () => {
      const width = window.innerWidth
      setWindowWidth(width)

      if (width < breakpoints.mobile) {
        setViewMode('mobile')
      } else if (width < breakpoints.tablet) {
        setViewMode('tablet')
      } else {
        setViewMode('desktop')
      }
    }

    handleResize()
    window.addEventListener('resize', handleResize)
    return () => window.removeEventListener('resize', handleResize)
  }, [breakpoints])

  return {
    viewMode,
    windowWidth,
    isMobile: viewMode === 'mobile',
    isTablet: viewMode === 'tablet',
    isDesktop: viewMode === 'desktop',
    isMobileOrTablet: viewMode === 'mobile' || viewMode === 'tablet',
  }
}