import React, { memo } from 'react';
import { Handle, Position, NodeProps } from 'reactflow';
import { FiPlay, FiZap, FiLock } from 'react-icons/fi';
import { getComponentLabel } from '../../utils/componentUtils';
import NodeWrapper from './NodeWrapper';
import type { BaseNodeData } from '../../types/settings';

const StartNode = memo<NodeProps<BaseNodeData>>(({ data, selected }) => {
  return (
    <NodeWrapper data={data} selected={selected} nodeClass="start-node">
      <div className="node-header">
        <FiZap className="node-icon" />
        <span className="node-type">{getComponentLabel('start')}</span>
        {data.locked && <FiLock className="lock-icon" />}
      </div>

      <div className="node-body">
        <div className="start-icon">
          <FiPlay />
        </div>
        <div className="node-label">{data.label || getComponentLabel('start')}</div>
        {data.plugin && (
          <div className="node-plugin">{data.plugin}</div>
        )}
      </div>

      <Handle
        type="source"
        position={Position.Bottom}
        className="node-handle"
        id="output"
      />
    </NodeWrapper>
  );
});

StartNode.displayName = 'StartNode';

export default StartNode;
