import styled from 'styled-components'
import { ImageWrapper } from '../../components/MediaWrapper';
import { respondTo } from '../../utils/responsive';

const Frame = ({ children }) => {
    return (
        <StyledFrame id="game-frame">
            {children}
            <div id="modal-root"></div>
            <ImageWrapper
                src="/images/game/frame-border.png"
                m_src="/images/game/frame-border-m.png"
                alt="frame"
                className="frame-border"
            />
        </StyledFrame>
    );
}

const StyledFrame = styled.div`
    --width: 912px;
    --height: calc(var(--width) * 0.568);
    width: var(--width);
    height: var(--height);
    position: relative;
    border-radius: 36px;
    overflow: hidden;
    filter: drop-shadow(8px 9px 4px rgba(0, 0, 0, 0.25));
    background-color: #000;

    // hide scrollbar
    scrollbar-width: none;
    -ms-overflow-style: none;

    /* @media (max-height: 800px) {
        --width: 740px;
    } */

    ${respondTo.sm} {
        --width: calc((100vw - 32px));
        --height: calc((var(--width) * (536 / 343)));
        border-radius: 32px;
    }
    
    &::-webkit-scrollbar {
        display: none;
    }

    .frame-border {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1000;
        object-fit: cover;
        pointer-events: none;
    }
`;

export default Frame
