import React from 'react';

export default function EventDetails() {
  return (
    <div className="fixed right-6 bottom-32 w-80 z-40 animate-fade-in-right delay-200" style={{ right: '24px', bottom: '128px' }}>
      <div className="glass neon-border rounded-xl shadow-2xl flex flex-col bg-black/80 backdrop-blur-2xl border-white/10 overflow-hidden card-interactive">
        <div className="p-4 flex justify-between items-center border-b border-white/5 bg-white/5 relative">
          <div className="absolute top-0 left-0 w-full h-[1px] bg-gradient-to-r from-transparent via-[#a88cfb]/50 to-transparent"></div>
          <h3 className="text-[10px] uppercase font-mono-data tracking-widest text-violet-400">Selected Event Details</h3>
          <button className="text-zinc-500 hover:text-white transition-colors cursor-pointer material-symbols-outlined text-sm">close</button>
        </div>
        
        <div className="p-4 space-y-4">
          <div className="bg-black/40 rounded-lg p-3 border border-white/5 shadow-inner">
            <p className="text-[8px] font-mono-data text-zinc-500 uppercase mb-1">Raw Signature</p>
            <p className="text-[10px] font-mono-data break-all text-[#a88cfb] opacity-90">SHA256: 8a7f11c2a10be...b9921e2a10bf</p>
          </div>
          <div className="bg-black/40 rounded-lg p-3 border border-white/5 shadow-inner flex justify-between items-center">
            <p className="text-[8px] font-mono-data text-zinc-500 uppercase">Geolocation</p>
            <div className="text-right">
              <span className="text-[10px] font-mono-data text-white block">Moscow, RU</span>
              <span className="text-[9px] font-mono-data font-bold italic text-[#00daf3]">PROXIED</span>
            </div>
          </div>
        </div>
        
        <div className="p-3 border-t border-white/5 bg-white/[0.02] flex gap-2">
          <button className="flex-1 bg-violet-500/20 text-violet-400 hover:bg-violet-500 hover:text-white border border-violet-500/50 py-2.5 rounded-lg text-[10px] font-bold tracking-[0.2em] transition-all uppercase btn-interactive shadow-[0_0_10px_rgba(167,139,250,0.1)] focus:ring-2 focus:ring-violet-500/50">
            Trace Route
          </button>
          <button className="px-3 bg-white/5 text-zinc-400 hover:bg-white/10 hover:text-white border border-white/10 rounded-lg transition-all flex items-center justify-center btn-interactive">
            <span className="material-symbols-outlined text-[14px]">share</span>
          </button>
        </div>
      </div>
    </div>
  );
}