'use client';

import * as React from 'react';

/**
 * Subscribe to a CSS media query.
 *
 * Uses `useSyncExternalStore` rather than an effect so the value is correct on
 * the very first client render — an effect-based version flashes the wrong
 * layout for one frame, which is visible on responsive components like Drawer.
 * The server snapshot returns `false`, so SSR always renders the desktop branch.
 */
export function useMediaQuery(query: string): boolean {
  const subscribe = React.useCallback(
    (onChange: () => void) => {
      const list = window.matchMedia(query);
      list.addEventListener('change', onChange);
      return () => list.removeEventListener('change', onChange);
    },
    [query]
  );

  return React.useSyncExternalStore(
    subscribe,
    () => window.matchMedia(query).matches,
    () => false
  );
}

/** Breakpoint the kit treats as the mobile/desktop boundary (Tailwind `md`). */
export const MOBILE_BREAKPOINT = 768;

/** Convenience wrapper around {@link useMediaQuery} for the mobile breakpoint. */
export function useIsMobile(): boolean {
  return useMediaQuery(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
}