import React from "react";
import "./Footer.css";

const Footer = () => {
    const [isExpanded, setIsExpanded] = React.useState(false);
    const [isVisible, setIsVisible] = React.useState(false);
    const toggleExpand = () => {
        if(!isExpanded) {
            setIsVisible(true);
        }
        setIsExpanded((prev) => !prev);
    };
    const onTransitionEnd = () => {
        if(!isExpanded) {
            setIsVisible(false);
        }
    };
    return (
        <footer className={`footer ${isExpanded ? "expanded" : ""}`}>
            <button
                className="toggle-button"
                onClick={toggleExpand}
                type="button"
            >
                {isExpanded ? "↓" : "↑"}
            </button>
            <div className={`footer-content`}>
                <p>&copy; {new Date().getFullYear()} Hangman Lab. {!isVisible && (<span>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <a href="mailto:hzhang@hangman-lab.top">email</a>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <a href="https://git.hangman-lab.top/hzhang/HangmanLab">git</a>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        &nbsp;&nbsp;&nbsp;&nbsp;
                    </span>
                    )}</p>
                {
                    isVisible && (
                        <div
                            className={`footer-details ${isExpanded ? "expanded" : ""}`}
                            onTransitionEnd={onTransitionEnd}
                        >
                            <div className="footer-icons">
                                <a
                                    href="https://www.linkedin.com/in/zhhrozhh/"
                                    target="_blank"
                                    rel="noopener noreferrer"
                                >
                                    <img
                                        src="/icons/linkedin.png"
                                        alt="LinkedIn"
                                        className="footer-icon"
                                    />
                                    LinkedIn
                                </a>
                                <a
                                    href="https://git.hangman-lab.top/hzhang/HangmanLab"
                                    target="_blank"
                                    rel="noopener noreferrer"
                                >
                                    <img
                                        src="/icons/git.png"
                                        alt="Git"
                                        className="footer-icon"
                                    />
                                    Git
                                </a>
                                <a href="mailto:hzhang@hangman-lab.top">
                                    <img
                                        src="/icons/email.png"
                                        alt="Email"
                                        className="footer-icon"
                                    />
                                    Email
                                </a>
                            </div>
                        </div>
                    )
                }
            </div>
        </footer>
    );
};

export default Footer;