Adapt UI with a `useMediaQuery` Hook for Responsive Design

import { useState, useEffect } from 'react';

const useMediaQuery = (query) => {
  const [matches, setMatches] = useState(false); // Initial state doesn't reflect actual match on server

  useEffect(() => {
    // Check if window is defined (client-side)
    if (typeof window !== 'undefined') {
      const mediaQueryList = window.matchMedia(query);
      const listener = (event) => setMatches(event.matches);

      // Set initial match state
      setMatches(mediaQueryList.matches);

      // Add listener for changes
      mediaQueryList.addEventListener('change', listener);

      // Clean up the listener
      return () => {
        mediaQueryList.removeEventListener('change', listener);
      };
    }
    // For SSR or environments where window is not defined, it will return false
    // You might want to handle initial SSR state more explicitly depending on your needs.
    return undefined;
  }, [query]);

  return matches;
};

export default useMediaQuery;

/* Example Usage (in a component):
import React from 'react';
import useMediaQuery from './useMediaQuery'; // Assuming useMediaQuery.js

function ResponsiveText() {
  const isDesktop = useMediaQuery('(min-width: 1024px)');
  const isTablet = useMediaQuery('(min-width: 768px) and (max-width: 1023px)');
  const isMobile = useMediaQuery('(max-width: 767px)');
  const isPortrait = useMediaQuery('(orientation: portrait)');
  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');


  const bgColor = prefersDarkMode ? '#333' : '#eee';
  const textColor = prefersDarkMode ? '#eee' : '#333';

  return (
    <div style={{ padding: '20px', backgroundColor: bgColor, color: textColor, minHeight: '100vh', transition: 'background-color 0.3s, color 0.3s' }}>
      <h1>Responsive Content</h1>
      <p>
        Resize your browser window or toggle dark mode to see the content change.
      </p>
      {isDesktop && <p>You are viewing on a <strong>Desktop</strong> screen.</p>}
      {isTablet && <p>You are viewing on a <strong>Tablet</strong> screen.</p>}
      {isMobile && <p>You are viewing on a <strong>Mobile</strong> screen.</p>}
      {isPortrait ? <p>Your device is in <strong>Portrait</strong> orientation.</p> : <p>Your device is in <strong>Landscape</strong> orientation.</p>}
      {prefersDarkMode ? <p>You prefer <strong>Dark Mode</strong>.</p> : <p>You prefer <strong>Light Mode</strong>.</p>}

      <div style={{ marginTop: '30px', border: '1px solid currentColor', padding: '15px' }}>
        <h2>Dynamic Styles Example</h2>
        <p style={{ fontSize: isDesktop ? '24px' : (isTablet ? '18px' : '14px'), fontWeight: isDesktop ? 'bold' : 'normal' }}>
          This text size and weight change with screen size.
        </p>
      </div>
    </div>
  );
}

export default ResponsiveText;
*/