import { memo } from 'react';
import { SwapOutlined } from '@ant-design/icons';

interface OriginalAttributeNodeProps {
  data: {
    label: string;
    color: string;
    isDark: boolean;
    crossoverSource?: string; // The query from which this attribute was crossed over
  };
}

export const OriginalAttributeNode = memo(({ data }: OriginalAttributeNodeProps) => {
  const { label, color, isDark, crossoverSource } = data;
  const isCrossover = !!crossoverSource;

  return (
    <div
      style={{
        position: 'relative',
        padding: isCrossover ? '8px 16px 8px 12px' : '8px 16px',
        borderRadius: 8,
        background: isDark
          ? `linear-gradient(135deg, ${color}22 0%, ${color}0a 100%)`
          : `linear-gradient(135deg, ${color}1a 0%, ${color}05 100%)`,
        border: isCrossover
          ? `2px dashed ${isDark ? '#faad14' : '#d48806'}`
          : `1px solid ${color}33`,
        color: isDark ? 'rgba(255,255,255,0.9)' : 'rgba(0,0,0,0.85)',
        fontSize: '13px',
        fontWeight: 500,
        textAlign: 'center',
        whiteSpace: 'nowrap',
        userSelect: 'none',
        boxShadow: isCrossover
          ? '0 2px 8px rgba(250, 173, 20, 0.3)'
          : '0 2px 6px rgba(0,0,0,0.05)',
      }}
    >
      {isCrossover && (
        <SwapOutlined
          style={{
            position: 'absolute',
            top: -8,
            left: -8,
            fontSize: 14,
            color: isDark ? '#faad14' : '#d48806',
            background: isDark ? '#1f1f1f' : '#fff',
            borderRadius: '50%',
            padding: 2,
            border: `1px solid ${isDark ? '#faad14' : '#d48806'}`,
          }}
        />
      )}
      <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
        {label}
      </div>
      {isCrossover && (
        <div
          style={{
            fontSize: 9,
            color: isDark ? '#faad14' : '#d48806',
            marginTop: 2,
            fontWeight: 400,
          }}
        >
          ← from {crossoverSource}
        </div>
      )}
    </div>
  );
});

OriginalAttributeNode.displayName = 'OriginalAttributeNode';
