import { memo } from 'react';

interface CategoryHeaderNodeProps {
  data: {
    label: string;
    color: string;
    isFixed: boolean;
    isDark: boolean;
  };
}

export const CategoryHeaderNode = memo(({ data }: CategoryHeaderNodeProps) => {
  const { label, color, isFixed, isDark } = data;

  return (
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        gap: 6,
        padding: '8px 16px',
        borderRadius: 20,
        background: isDark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.03)',
        // border: `1px solid ${color}`, // Removed border to reduce abruptness
        color: color,
        fontSize: '14px',
        fontWeight: 700,
        textAlign: 'center',
        whiteSpace: 'nowrap',
        userSelect: 'none',
        boxShadow: '0 2px 8px rgba(0,0,0,0.05)',
        width: 260,
        overflow: 'hidden',
        textOverflow: 'ellipsis',
      }}
    >
      {label}
      {!isFixed && (
        <span
          style={{
            fontSize: '10px',
            padding: '2px 6px',
            borderRadius: 10,
            background: color,
            color: '#fff',
            marginLeft: 4,
            fontWeight: 600,
          }}
        >
          AI
        </span>
      )}
    </div>
  );
});

CategoryHeaderNode.displayName = 'CategoryHeaderNode';
