import { useMediaQuery } from "usehooks-ts"

type Size = "mobile" | "tablet" | "desktop"

/**
 * @example
 * mobile: "max-width: 767px",
 * tablet: "min-width: 768px and max-width: 1023px",
 * desktop: "min-width: 1024px",
 * @param device - The device size to check against.
 * @returns True if the current viewport matches the specified device size, false otherwise.
 */
export const useBreakpoint = (devices: Size | Size[]) => {
  const deviceArray = Array.isArray(devices) ? devices : [devices]
  const queries = deviceArray.map((device) => `(${sizeMapping[device]})`)
  return useMediaQuery(queries.join(", "))
}

export const useIsMobile = () => useBreakpoint("mobile")
export const useIsTablet = () => useBreakpoint("tablet")
export const useIsDesktop = () => useBreakpoint("desktop")

const sizeMapping: Record<Size, string> = {
  mobile: "max-width: 767px",
  tablet: "min-width: 768px and max-width: 1023px",
  desktop: "min-width: 1024px",
}