'use client'; import { useState, useEffect, useRef } from 'react'; import Image from 'next/image'; import { Link, Button } from '@heroui/react'; import { Github, Mail } from 'lucide-react'; import { motion } from 'framer-motion'; const XIcon = ({ color }: { color: string }) => ( ); const DiscordIcon = ({ color }: { color: string }) => ( ); import { useLanguage } from '@/contexts/LanguageContext'; import { useTheme } from '@/contexts/ThemeContext'; export default function Footer() { const { t } = useLanguage(); const { theme } = useTheme(); const isDark = theme === 'dark'; const [animate, setAnimate] = useState(false); const footerRef = useRef(null); useEffect(() => { const currentRef = footerRef.current; if (!currentRef) return; const observer = new IntersectionObserver( (entries) => { if (entries[0].isIntersecting) { setAnimate(true); observer.disconnect(); } }, { threshold: 0.1 } ); observer.observe(currentRef); return () => observer.disconnect(); }, []); const socialIcons = [ { render: (c: string) => , alt: 'X' }, { render: (c: string) => , alt: 'GitHub' }, { render: (c: string) => , alt: 'Discord' }, { render: (c: string) => , alt: 'Email' }, ]; return ( ); }