import { memo } from 'react';
import { Handle, Position, NodeProps } from '@xyflow/react';
import { EndNode as EndNodeData } from '../../types/dialogue';
import styles from './nodes.module.css';

export const EndNode = memo(({ data, selected }: NodeProps & { data: EndNodeData }) => {
  return (
    <div
      className={[
        styles.node,
        styles.endNode,
        selected ? styles.selected : '',
      ].join(' ')}
    >
      <Handle type="target" position={Position.Top} id="target" className={styles.handle} />
      <div className={styles.endLabel}>END</div>
      <div className={styles.nodeId}>{data.id}</div>
    </div>
  );
});