import styled from '@emotion/styled';
import { SettingFloating } from './SettingFloating';
import { Device } from './Device';
import { useBuilder } from '@tempi/core-editor';
import { useShortcuts } from './useShortcuts';

export interface ViewportProps {
  children: React.ReactNode;
}

export const Viewport = ({ children, ...rest }: ViewportProps) => {
  const { device } = useBuilder();
  useShortcuts();

  return (
    <Wrapper {...rest}>
      <IFrameWrapper>
        <Device device={device}>{children}</Device>
      </IFrameWrapper>
      <SettingFloating />
    </Wrapper>
  );
};

const IFrameWrapper = styled.div`
  height: 100%;
  flex: 1;
  position: relative;
  overflow: hidden;
  background-color: #f3f3f3;
`;

const Wrapper = styled.div`
  width: 100%;
  height: 100%;
`;