import * as React from "react"

import { clsx, type ClassValue } from "clsx"

import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {

return twMerge(clsx(inputs))

}

export function useIsMobileScreen(breakpoint?: string) {

const [isMobileScreen, setIsMobileScreen] = React.useState(false)

React.useEffect(() => {

const mql = window.matchMedia(`(max-width: ${breakpoint ?? "768px"})`)

setIsMobileScreen(mql.matches)

const listener = () => setIsMobileScreen(mql.matches)

mql.addEventListener("change", listener)

return () => mql.removeEventListener("change", listener)

}, [breakpoint])

return isMobileScreen

}