import React from 'react'

export default function NodeInfoPanel({ selectedNode }) {
  if (!selectedNode) {
    return (
      <div className="p-4 bg-dark-800 text-white h-full">
        <h3 className="text-lg font-semibold mb-4">No node selected</h3>
        <p>Click on a node to view its details</p>
      </div>
    )
  }

  return (
    <div className="p-4 bg-dark-800 text-white h-full overflow-auto">
      <h3 className="text-lg font-semibold mb-4">{selectedNode.data.label}</h3>
      
      <div className="space-y-4">
        {Object.entries(selectedNode.data).map(([key, value]) => {
          if (key === 'label') return null
          
          return (
            <div key={key}>
              <h4 className="text-sm font-medium text-gray-400">{key}</h4>
              <p className="mt-1 text-sm text-white">
                {typeof value === 'object' ? JSON.stringify(value) : value}
              </p>
            </div>
          )
        })}
      </div>
    </div>
  )
}