import type { FC } from 'react'
import type { AnswerNodeType } from './types'
import type { NodeProps } from '@/app/components/workflow/types'
import * as React from 'react'
import { useTranslation } from 'react-i18next'
import InfoPanel from '../_base/components/info-panel'
import ReadonlyInputWithSelectVar from '../_base/components/readonly-input-with-select-var'

const Node: FC<NodeProps<AnswerNodeType>> = ({
  id,
  data,
}) => {
  const { t } = useTranslation()

  return (
    <div className="mb-1 px-3 py-1">
      <InfoPanel
        title={t('nodes.answer.answer', { ns: 'workflow' })}
        content={(
          <ReadonlyInputWithSelectVar
            value={data.answer}
            nodeId={id}
          />
        )}
      />
    </div>
  )
}

export default React.memo(Node)