import styles from './styles.module.scss'
import { useEffect, useState } from "react";
import tipsImg from '@assets/rotate_tips.png';
import { isAndroid, isIOS } from '@utils/helpers';

const i18n = global.i18n;

const WOrientation = () => {
    const getIsLandscape = () => window.matchMedia("(orientation: landscape)").matches;
    const [isLandscape, setIsLandscape] = useState(getIsLandscape);
    useEffect(() => {
        const mediaQuery = window.matchMedia("(orientation: landscape)");

        const handler = (e) => setIsLandscape(e.matches);
        mediaQuery.addEventListener("change", handler);

        return () => {
            mediaQuery.removeEventListener("change", handler);
        };
    }, []);

    if (!isLandscape) return null;
    if(!isAndroid() && !isIOS()) return null;

    return (
        <div className={styles.container}>
            <div className={styles.content}>
                <img src={tipsImg} />
                {/* <div className={styles.icon}>📱</div> */}
                <div className={styles.message}>
                    Rotate to portrait for the best gaming experience
                </div>
            </div>
        </div>
    )
}

export default WOrientation;