import { memo, useState } from 'react';

interface KeywordNodeProps {
  data: {
    label: string;
    color: string;
    isDark: boolean;
  };
}

export const KeywordNode = memo(({ data }: KeywordNodeProps) => {
  const { label, color, isDark } = data;
  const [isHovered, setIsHovered] = useState(false);

  return (
    <div
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      style={{
        position: 'relative',
        padding: '10px 16px',
        paddingRight: '40px',
        borderRadius: 12,
        background: isDark
          ? 'linear-gradient(135deg, rgba(250, 173, 20, 0.15) 0%, rgba(250, 173, 20, 0.05) 100%)'
          : 'linear-gradient(135deg, rgba(250, 173, 20, 0.08) 0%, rgba(255, 255, 255, 0.8) 100%)',
        border: `1px solid ${color}44`,
        boxShadow: isHovered
          ? `0 8px 20px ${color}33`
          : `0 4px 12px ${color}1a`,
        color: isDark ? '#fff' : '#1f1f1f',
        fontSize: '14px',
        fontWeight: 500,
        textAlign: 'left',
        cursor: 'pointer',
        transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
        whiteSpace: 'nowrap',
        userSelect: 'none',
        transform: isHovered ? 'translateY(-2px)' : 'translateY(0)',
        backdropFilter: 'blur(4px)',
      }}
    >
      <div style={{ lineHeight: 1.4 }}>{label}</div>
      <span
        style={{
          position: 'absolute',
          top: 10,
          right: 10,
          padding: '2px 6px',
          borderRadius: 4,
          background: 'rgba(250, 173, 20, 0.15)',
          color: '#faad14',
          border: '1px solid rgba(250, 173, 20, 0.3)',
          fontSize: '10px',
          fontWeight: 700,
          letterSpacing: '0.5px',
        }}
      >
        NEW
      </span>
    </div>
  );
});

KeywordNode.displayName = 'KeywordNode';
