import { memo } from 'react';

interface CategoryNodeProps {
  data: {
    label: string;
    color: string;
    attributeCount: number;
    isDark: boolean;
  };
}

export const CategoryNode = memo(({ data }: CategoryNodeProps) => {
  const { label, color, isDark } = data;

  return (
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        gap: 6,
        padding: '10px 16px',
        borderRadius: 8,
        background: `linear-gradient(135deg, ${color} 0%, ${color}dd 100%)`,
        color: '#fff',
        fontSize: '14px',
        fontWeight: 'bold',
        textAlign: 'center',
        whiteSpace: 'nowrap',
        userSelect: 'none',
        boxShadow: `0 3px 10px ${isDark ? 'rgba(0,0,0,0.5)' : 'rgba(0,0,0,0.2)'}`,
      }}
    >
      <span>{label}</span>
    </div>
  );
});

CategoryNode.displayName = 'CategoryNode';
