import React, { useState, useRef } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import { Wrench, Check, Copy, X, Eye, EyeOff } from 'lucide-react'; import { Button } from '../components/ui/Button'; export const FixItButton = ({ code = "p-4 bg-red-500 rounded-lg" }) => { const [isOpen, setIsOpen] = useState(false); const [copied, setCopied] = useState(false); const [showPreview, setShowPreview] = useState(false); const iframeRef = useRef(null); const handleCopy = () => { navigator.clipboard.writeText(code); setCopied(true); setTimeout(() => setCopied(false), 2000); }; // Extract the fix code string from various fix formats const getFixCode = () => { if (typeof code === 'string') return code; if (typeof code === 'object' && code.fix_code) return code.fix_code; if (typeof code === 'object' && code.issue) return `${code.issue}: ${code.fix_code || ''}`; return String(code); }; const fixCode = getFixCode(); // Generate preview HTML with Tailwind CDN const getPreviewHTML = () => `

Preview: Your fix applied

`; return (

{isOpen && ( <> {/* Backdrop to close on click outside */}

setIsOpen(false)} /> {/* Popup - opens ABOVE the button to avoid cut-off */} {/* Header */}

Tailwind Fix

{/* Code block */}

{fixCode}

{/* Action buttons */}

{/* Copy button */} {/* Preview toggle */}

{/* Live Preview iframe */} {showPreview && (