import { memo } from 'react';

interface QueryNodeProps {
  data: {
    label: string;
    isDark: boolean;
    fontSize: number;
  };
}

export const QueryNode = memo(({ data }: QueryNodeProps) => {
  const { label, isDark, fontSize } = data;

  return (
    <div
      style={{
        padding: '6px 12px',
        borderRadius: 6,
        background: isDark ? '#177ddc' : '#1890ff',
        border: `2px solid ${isDark ? '#1890ff' : '#096dd9'}`,
        color: '#fff',
        fontSize: `${fontSize}px`,
        fontWeight: 'bold',
        textAlign: 'center',
        whiteSpace: 'nowrap',
        userSelect: 'none',
      }}
    >
      {label}
    </div>
  );
});

QueryNode.displayName = 'QueryNode';
