import { useState, useEffect } from 'react';

const useMediaQuery = (query) => {
  const [matches, setMatches] = useState(false);

  useEffect(() => {
    if (typeof window === 'undefined' || !window.matchMedia) {
      return;
    }

    const mediaQueryList = window.matchMedia(query);
    const listener = (event) => setMatches(event.matches);

    setMatches(mediaQueryList.matches);
    mediaQueryList.addListener(listener);

    return () => {
      mediaQueryList.removeListener(listener);
    };
  }, [query]);

  return matches;
};

export default useMediaQuery;

/* Example Usage:
import React from 'react';
import useMediaQuery from './useMediaQuery';

function MyComponent() {
  const isLargeScreen = useMediaQuery('(min-width: 1024px)');
  const isDarkTheme = useMediaQuery('(prefers-color-scheme: dark)');

  return (
    <div>
      {isLargeScreen ? 'Large Screen' : 'Small Screen'}
      <p>Theme: {isDarkTheme ? 'Dark' : 'Light'}</p>
    </div>
  );
}
*/