// import react
import React from 'react';

// component dialog title
import Button from '../Button';
import Overlay from '../Overlay';
import ApiSignal from '../../signals/Api';
import { useSignal } from '../../signal';

/**
 * brain node input
 *
 * @param props 
 */
const BrainNodeConfig = (props = {}) => {
  // signals
  const [api] = useSignal(ApiSignal);

  // return jsx
  return (
    <Overlay
      open={!!props.open}
      title={props.node?.title || props.title}
      onClose={props.onClose}
      subtitle={props.node?.description || props.description}
    >
      {props.children}

      <div className="flex flex-row justify-end items-center pt-4 space-x-2">
        <Button
          color="transparent"
          onClick={props.onClose}
        >
          {api.translate('common:button.cancel', 'Cancel')}
        </Button>
        <Button
          color="primary"
          onClick={props.onClose}
        >
          {api.translate('common:button.done', 'Done')}
        </Button>
      </div>
    </Overlay>
  );
};

/**
 * @description - Brain Node Input component
 */
export default BrainNodeConfig;