import React, { forwardRef } from 'react';

import { OuterWrapper, Wrapper } from './styled';

type Props = {
  children: React.ReactNode;
  viewport: ViewportType;
  rotation: number;
};
type Ref = HTMLDivElement;

const Viewer = forwardRef<Ref, Props>(
  ({ children, viewport, rotation }: Props, ref) => {
    const width =
      (Math.abs(rotation) / 90) % 2 === 1 ? viewport.height : viewport.width;

    return (
      <OuterWrapper id="pdf_viewer" ref={ref}>
        <Wrapper width={width}>{children}</Wrapper>
      </OuterWrapper>
    );
  },
);

export default Viewer;