import { useMediaQuery } from '@danixsoft/hooks';

export default function App() {
  const isDesktop = useMediaQuery('(min-width: 800px)');

  return (
    <div style={{ 
      height: '100vh', 
      display: 'flex', 
      alignItems: 'center', 
      justifyContent: 'center',
      backgroundColor: isDesktop ? '#eff6ff' : '#1e1e1e',
      color: isDesktop ? '#1e3a8a' : 'white',
      fontFamily: 'sans-serif',
      transition: 'all 0.5s ease'
    }}>
      <div style={{ textAlign: 'center' }}>
        <div style={{ fontSize: '4rem', marginBottom: '1rem' }}>
          {isDesktop ? '🖥️' : '📱'}
        </div>
        <h2 style={{ margin: 0 }}>
          {isDesktop ? 'Desktop View' : 'Mobile/Tablet View'}
        </h2>
        <p>Resize the sandbox preview pane to see it change!</p>
      </div>
    </div>
  );
}