import React, { useEffect, useRef, useState } from 'react';
import styles from './Footer.module.css';

function Footer() {
  const [isVisible, setIsVisible] = useState(false);
  const footerRef = useRef(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        setIsVisible(entry.isIntersecting);
      },
      {
        root: null,
        rootMargin: "0px",
        threshold: 0.1
      }
    );

    if (footerRef.current) {
      observer.observe(footerRef.current);
    }

    return () => {
      if (footerRef.current) {
        observer.unobserve(footerRef.current);
      }
    };
  }, []);

  return (
    <footer ref={footerRef} className={`${styles.footer} ${isVisible ? styles.visible : ''}`}>
      <div className={styles.content}>
        <div className={styles.topSection}>
          <div className={styles.logo}>
            LOGO
          </div>
          <div className={styles.contact}>
            <h3>Contact</h3>
            <p>Email: your.email@example.com</p>
            <p>Phone: (123) 456-7890</p>
          </div>
          <div className={styles.social}>
            <h3>Social</h3>
            <a href="https://linkedin.com/in/yourprofile" target="_blank" rel="noopener noreferrer">LinkedIn</a>
            <a href="https://github.com/yourusername" target="_blank" rel="noopener noreferrer">GitHub</a>
            <a href="https://twitter.com/yourusername" target="_blank" rel="noopener noreferrer">Twitter</a>
          </div>
        </div>
        <div className={styles.bottomSection}>
          <a href="/path-to-your-resume.pdf" target="_blank" rel="noopener noreferrer" className={styles.resumeLink}>Download Resume (PDF)</a>
        </div>
      </div>
    </footer>
  );
}

export default Footer;