import react from 'react';
import TiledLayer from './TiledLayer';

interface ViewportProperties {
  boardSize: number;
  shift: { x: number; y: number };
  zoom: number;
}

const Viewport: react.FC<ViewportProperties> = (props: ViewportProperties) => {
  return (
    <svg height={props.boardSize} width={props.boardSize}>
      <defs>
        <TiledLayer id='tl16' zoomLevel={16} />
      </defs>
      <g
        transform={`translate(${props.shift.x}, ${props.shift.y}) scale(${props.zoom})`}
      >
        <circle cx='50' cy='50' r='50' />
        <use x={0} y={0} href='#tl16' />
      </g>
    </svg>
  );
};

export default Viewport;