import { memo, useState } from 'react';

interface AttributeNodeProps {
  data: {
    label: string;
    fillColor: string;
    strokeColor: string;
    fontSize: number;
  };
}

export const AttributeNode = memo(({ data }: AttributeNodeProps) => {
  const { label, fillColor, strokeColor, fontSize } = data;
  const [isHovered, setIsHovered] = useState(false);

  return (
    <div
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      style={{
        padding: '8px 16px',
        borderRadius: 8,
        background: fillColor,
        border: '1px solid transparent',
        boxShadow: isHovered
          ? `0 4px 12px ${strokeColor}66`
          : `0 2px 4px ${strokeColor}33`,
        color: '#fff',
        fontSize: `${fontSize}px`,
        fontWeight: 500,
        textAlign: 'center',
        cursor: 'pointer',
        transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
        transform: isHovered ? 'translateY(-2px)' : 'translateY(0)',
        whiteSpace: 'nowrap',
        userSelect: 'none',
        width: 240,
        overflow: 'hidden',
        textOverflow: 'ellipsis',
      }}
    >
      {label}
    </div>
  );
});

AttributeNode.displayName = 'AttributeNode';
