// app/components/BlurredCode.tsx

'use client';

import { useState, useEffect } from 'react';
import { useTheme } from 'next-themes';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { oneDark, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';

const pythonCode = `import quantum_entanglement
import neural_net_vibes
from cosmos import dark_matter

class HotdogAnalyzer(quantum_entanglement.Observer):
    def __init__(self, mustard_ratio=0.8):
        self.mustard_ratio = mustard_ratio
        self.is_sandwich = None
        self.__secret_sauce = "01101000 01101101 01101101"

    async def _calculate_bun_topology(self, bread_manifold):
        """Uses string theory to determine if a bun is contiguous."""
        try:
            dimensions = await dark_matter.measure(bread_manifold)
            if dimensions > 3:
                raise Exception("Bun exists in the 4th dimension.")
            return dimensions * self.mustard_ratio
        except OverflowError:
            return "Just eat it already"

    @neural_net_vibes.optimize(epochs=42069)
    def check_is_sandwich(self, hotdog):
        if hotdog.is_taco():
            self.is_sandwich = False
            return self.is_sandwich
        
        # Initiate brute-force topological check
        for atom in hotdog.get_atoms():
            if atom.vibe_check() == "sus":
                hotdog.add_ketchup(override=True)
        
        self.is_sandwich = True if hotdog.entropy < 9000 else False
        return "Maybe?"

if __name__ == "__main__":
    analyzer = HotdogAnalyzer(mustard_ratio=1.1)
    analyzer.check_is_sandwich(target="glizzy")`;

export default function BlurredCode() {
    const { resolvedTheme } = useTheme();
    const [mounted, setMounted] = useState(false);

    useEffect(() => {
        const timer = setTimeout(() => setMounted(true), 0);
        return () => clearTimeout(timer);
    }, []);

    return (
        <div className="absolute inset-0 overflow-hidden bg-slate-50 dark:bg-[#0d1117] transition-colors duration-300 z-0 pointer-events-none flex justify-center">
            <div className="relative w-full h-full text-left p-8 opacity-40 blur-[3px] group-hover:blur-[2px] group-hover:opacity-100 transition-all duration-700 animate-[scrollUp_40s_linear_infinite] [&_pre]:bg-transparent! [&_code]:bg-transparent!">
                {mounted && (
                    <SyntaxHighlighter
                        language="python"
                        style={resolvedTheme === 'light' ? oneLight : oneDark}
                        customStyle={{ margin: 0, padding: 0, fontSize: '14px' }}
                    >
                        {pythonCode + '\n\n\n' + pythonCode + '\n\n\n' + pythonCode}
                    </SyntaxHighlighter>
                )}
            </div>
        </div>
    );
}