import { memo, useState } from 'react';

interface DescriptionNodeProps {
  data: {
    keyword: string;
    description: string;
    color: string;
    isDark: boolean;
  };
}

export const DescriptionNode = memo(({ data }: DescriptionNodeProps) => {
  const { keyword, description, isDark } = data;
  const [isHovered, setIsHovered] = useState(false);

  return (
    <div
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      style={{
        padding: '16px',
        borderRadius: 12,
        background: isDark
          ? 'linear-gradient(135deg, rgba(82, 196, 26, 0.15) 0%, rgba(82, 196, 26, 0.05) 100%)'
          : 'linear-gradient(135deg, rgba(82, 196, 26, 0.08) 0%, rgba(255, 255, 255, 0.8) 100%)',
        border: `1px solid ${isHovered ? '#52c41a66' : '#52c41a33'}`,
        color: isDark ? '#fff' : '#333',
        fontSize: '13px',
        width: 400,
        minHeight: 50,
        cursor: 'pointer',
        transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
        userSelect: 'none',
        boxShadow: isHovered
          ? `0 8px 20px ${isDark ? 'rgba(82, 196, 26, 0.2)' : 'rgba(82, 196, 26, 0.15)'}`
          : `0 4px 12px ${isDark ? 'rgba(0, 0, 0, 0.2)' : 'rgba(0, 0, 0, 0.05)'}`,
        backdropFilter: 'blur(4px)',
        transform: isHovered ? 'translateY(-2px)' : 'translateY(0)',
      }}
    >
      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          gap: 6,
          marginBottom: 6,
          paddingBottom: 6,
          borderBottom: `1px solid ${isDark ? 'rgba(82, 196, 26, 0.3)' : 'rgba(82, 196, 26, 0.2)'}`,
        }}
      >
        <span
          style={{
            background: 'linear-gradient(135deg, #52c41a 0%, #73d13d 100%)',
            color: '#fff',
            padding: '2px 6px',
            borderRadius: 4,
            fontSize: '10px',
            fontWeight: 700,
          }}
        >
          創新應用
        </span>
        <span
          style={{
            fontWeight: 600,
            color: '#52c41a',
            fontSize: '11px',
          }}
        >
          {keyword}
        </span>
      </div>
      <div
        style={{
          lineHeight: 1.5,
          wordBreak: 'break-word',
          fontSize: '13px',
        }}
      >
        {description}
      </div>
    </div>
  );
});

DescriptionNode.displayName = 'DescriptionNode';
