/**
 * NodeListItem - Draggable node type item for the sidebar.
 * Used in both regular categories and I/O sub-groups.
 */

import React from 'react';
import type { NodeType } from '../../api/automation2Api';
import { getCategoryIcon } from './utils';
import type { GetLabelFn } from './utils';
import styles from './Automation2FlowEditor.module.css';

interface NodeListItemProps {
  node: NodeType;
  language: string;
  getLabel: GetLabelFn;
  getCategoryIcon?: (categoryId: string) => React.ReactNode;
}

export const NodeListItem: React.FC<NodeListItemProps> = ({
  node,
  language,
  getLabel,
  getCategoryIcon: getIcon = getCategoryIcon,
}) => (
  <div
    className={styles.nodeItem}
    draggable
    onDragStart={(e) => {
      e.dataTransfer.setData('application/json', JSON.stringify({ type: node.id }));
      e.dataTransfer.effectAllowed = 'copy';
    }}
  >
    <div
      className={styles.nodeItemIcon}
      style={{
        backgroundColor: node.meta?.color
          ? `${node.meta.color}20`
          : 'var(--bg-tertiary, #e9ecef)',
        color: node.meta?.color ?? 'var(--text-secondary, #666)',
      }}
    >
      {getIcon(node.category)}
    </div>
    <div className={styles.nodeItemInfo}>
      <span className={styles.nodeItemLabel}>{getLabel(node.label, language)}</span>
      <span className={styles.nodeItemDesc}>{getLabel(node.description, language)}</span>
    </div>
  </div>
);