import * as React from 'react';
import { ISymbolModel } from '../../../Interfaces/ISymbolModel';
import { Symbol } from './Symbol';

interface ISymbolLayerProps {
  symbols: Map<string, ISymbolModel>
}

export const SymbolLayer: React.FC<ISymbolLayerProps> = (props) => {
  const symbols: JSX.Element[] = [];
  props.symbols.forEach((symbol) => {
    symbols.push(
      <Symbol key={`symbol-${symbol.id}`} model={symbol} />
    );
  });
  return (
    <g>
      {
        symbols
      }
    </g>
  );
};