import react from 'react';

import '../theme/layer.css';

const Layer: react.FC<{
  shift: { x: number; y: number };
  zoom: number;
  children?: JSX.Element;
}> = (props: {
  shift: { x: number; y: number };
  zoom: number;
  children?: JSX.Element;
}) => {
  const {children: children, ...argProps} = props; 
  console.log(`--- Rendering layer, props: ${JSON.stringify(argProps)} ---`);

  return (
    <div
      className='background'
      style={{
        transform: `translate(${-props.shift.x}px, ${-props.shift.y}px) scale(${
          props.zoom
        })`,
      }}
    >
      {props.children}
    </div>
  );
};

export default Layer;