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
}

export function formatNumber(num: number, decimals: number = 1): string {
  if (num === 0) return "0"

  const k = 1000
  const sizes = ["", "K", "M", "B", "T"]

  const i = Math.floor(Math.log(Math.abs(num)) / Math.log(k))

  if (i === 0) return num.toString()

  const scaled = num / Math.pow(k, i)
  return `${scaled.toFixed(decimals)}${sizes[i]}`
}