import React, { useState } from 'react';
import { BugAntIcon } from '@heroicons/react/24/outline';
import DebugOverlay from './DebugOverlay';

const DebugToggle = () => {
  const [isDebugOpen, setIsDebugOpen] = useState(false);

  // Only show in development or when debug is enabled
  const shouldShow = import.meta.env.DEV || 
                    import.meta.env.VITE_DEBUG_ENABLED === 'true';

  if (!shouldShow) return null;

  return (
    <>
      {/* Floating Debug Button */}
      <button
        onClick={() => setIsDebugOpen(true)}
        className="fixed bottom-4 right-4 z-40 flex h-12 w-12 items-center justify-center rounded-full bg-gray-800 text-white shadow-lg hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2"
        title="Open Debug Panel"
      >
        <BugAntIcon className="h-6 w-6" />
      </button>

      {/* Debug Overlay */}
      <DebugOverlay 
        isOpen={isDebugOpen} 
        onClose={() => setIsDebugOpen(false)} 
      />
    </>
  );
};

export default DebugToggle;