'use client';

import { useSyncExternalStore } from 'react';

function subscribe(query: string, callback: () => void) {
  const mql = window.matchMedia(query);
  mql.addEventListener('change', callback);
  return () => mql.removeEventListener('change', callback);
}

/**
 * Fonte única de verdade para os breakpoints usados por componentes que
 * mudam de comportamento entre desktop e mobile (Table ↔ cards,
 * Modal ↔ Sheet). SSR-safe: retorna `false` no servidor e sincroniza no
 * client via `useSyncExternalStore`, evitando mismatch de hidratação.
 */
export function useMediaQuery(query: string): boolean {
  return useSyncExternalStore(
    (callback) => subscribe(query, callback),
    () => window.matchMedia(query).matches,
    () => false,
  );
}

/** Breakpoint `md` (768px) do schema de arquitetura — desktop acima, mobile abaixo. */
export function useIsDesktop(): boolean {
  return useMediaQuery('(min-width: 768px)');
}

export function usePrefersReducedMotion(): boolean {
  return useMediaQuery('(prefers-reduced-motion: reduce)');
}