export default function DetailPanel({ open, title, onClose, children }) {
  return (
    <div className={`fixed top-0 right-0 h-full w-96 bg-gray-900 border-l border-gray-700 shadow-2xl transform transition-transform duration-200 ease-in-out z-50 ${open ? 'translate-x-0' : 'translate-x-full'}`}>
      <div className="flex items-center justify-between p-4 border-b border-gray-700">
        <h2 className="text-white font-semibold text-lg truncate">{title}</h2>
        <button onClick={onClose} className="text-gray-400 hover:text-white text-xl leading-none">×</button>
      </div>
      <div className="p-4 overflow-y-auto h-[calc(100%-57px)]">{children}</div>
    </div>
  );
}