import React from 'react';
import { ISymbolModel } from '../../Interfaces/ISymbolModel';
import { SymbolForm } from './SymbolForm';

interface ISymbolPropertiesProps {
  symbol?: ISymbolModel
  symbols: Map<string, ISymbolModel>
  onChange: (key: string, value: string | number | boolean) => void
}

export function SymbolProperties(props: ISymbolPropertiesProps): JSX.Element {
  if (props.symbol === undefined) {
    return <div></div>;
  }

  return (
    <div className='h-3/5 p-3 bg-slate-200 overflow-y-auto'>
      <SymbolForm
        symbol={props.symbol}
        symbols={props.symbols}
        onChange={props.onChange} />
    </div>
  );
}