import React, { useContext } from 'react';
import { ThemeContext } from '../App';
import { ObjectInfo } from '../types';

interface ObjectInfoPanelProps {
  info: ObjectInfo;
  onClose: () => void;
}

const ObjectInfoPanel: React.FC<ObjectInfoPanelProps> = ({ info, onClose }) => {
  const { theme } = useContext(ThemeContext);

  const panelClasses = theme === 'dark'
    ? 'bg-black/50 border border-cyan-400/50 text-white shadow-[0_0_30px_#00ffff]'
    : 'bg-white/50 border border-blue-600/50 text-black shadow-[0_0_30px_#0066cc]';
    
  const titleClasses = theme === 'dark'
    ? 'bg-gradient-to-r from-cyan-400 to-fuchsia-500'
    : 'bg-gradient-to-r from-blue-600 to-orange-500';

  return (
    <div 
        className="fixed inset-0 bg-black/60 z-[1000] flex items-center justify-center p-4 animate-fadeIn"
        onClick={onClose}
    >
      <div 
        className={`relative w-full max-w-md p-8 rounded-2xl backdrop-blur-xl transition-all duration-300 ${panelClasses} animate-slideUp`}
        onClick={(e) => e.stopPropagation()}
      >
        <button 
            onClick={onClose} 
            className={`absolute top-4 right-4 text-3xl transition-transform duration-200 hover:rotate-90 ${theme === 'dark' ? 'text-cyan-400' : 'text-blue-600'}`}
            aria-label="Close"
        >
          &times;
        </button>
        <h2 className={`text-3xl font-bold mb-4 bg-clip-text text-transparent ${titleClasses}`}>
          {info.title}
        </h2>
        <p className="text-lg leading-relaxed">
          {info.description}
        </p>
      </div>
    </div>
  );
};

export default ObjectInfoPanel;