import { memo } from 'react';

interface GroupNodeProps {
  data: {
    label: string;
    color: string;
    width: number;
    height: number;
    isDark: boolean;
  };
}

export const GroupNode = memo(({ data }: GroupNodeProps) => {
  const { label, color, width, height, isDark } = data;

  return (
    <div
      className="group-node-background"
      style={{
        width,
        height,
        borderRadius: 16,
        background: isDark
          ? `linear-gradient(180deg, ${color}25 0%, ${color}10 100%)`
          : `linear-gradient(180deg, ${color}20 0%, ${color}08 100%)`,
        border: `2px solid ${color}40`,
        boxShadow: isDark
          ? `0 0 20px ${color}15, inset 0 0 30px ${color}08`
          : `0 0 20px ${color}10, inset 0 0 30px ${color}05`,
        transition: 'all 0.3s ease',
        pointerEvents: 'none', // Allow clicks to pass through to nodes
      }}
    >
      {label && (
        <div
          style={{
            position: 'absolute',
            top: -24,
            left: 0,
            width: '100%',
            textAlign: 'center',
            color: color,
            fontSize: '14px',
            fontWeight: 600,
            opacity: 0.8,
            textTransform: 'uppercase',
            letterSpacing: '1px',
          }}
        >
          {label}
        </div>
      )}
    </div>
  );
});

GroupNode.displayName = 'GroupNode';
