import React from "react";
import { ChevronUp, Mail, GitBranch, Linkedin } from "lucide-react";
import { cn } from "../lib/utils";

const Footer = () => {
    const [open, setOpen] = React.useState(false);

    return (
        <footer className="glass fixed bottom-0 left-0 right-0 z-20 border-t border-border">
            <div
                className={cn(
                    "overflow-hidden transition-all duration-300",
                    open ? "max-h-20" : "max-h-0"
                )}
            >
                <div className="flex items-center justify-center gap-6 py-3 text-xs">
                    <a
                        href="https://www.linkedin.com/in/zhhrozhh/"
                        target="_blank"
                        rel="noopener noreferrer"
                        className="inline-flex items-center gap-1.5 text-muted-foreground transition-colors hover:text-primary"
                    >
                        <Linkedin className="h-3.5 w-3.5" /> LinkedIn
                    </a>
                    <a
                        href="https://git.hangman-lab.top/hzhang/HangmanLab"
                        target="_blank"
                        rel="noopener noreferrer"
                        className="inline-flex items-center gap-1.5 text-muted-foreground transition-colors hover:text-primary"
                    >
                        <GitBranch className="h-3.5 w-3.5" /> Git
                    </a>
                    <a
                        href="mailto:hzhang@hangman-lab.top"
                        className="inline-flex items-center gap-1.5 text-muted-foreground transition-colors hover:text-primary"
                    >
                        <Mail className="h-3.5 w-3.5" /> Email
                    </a>
                </div>
            </div>
            <div className="flex h-9 items-center justify-between px-4">
                <p className="font-mono text-[11px] text-muted-foreground">
                    © {new Date().getFullYear()}{" "}
                    <span className="text-foreground/70">Hangman Lab</span>
                </p>
                <button
                    type="button"
                    onClick={() => setOpen((p) => !p)}
                    className="inline-flex items-center gap-1 rounded px-2 py-0.5 font-mono text-[11px] text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
                >
                    <ChevronUp
                        className={cn(
                            "h-3.5 w-3.5 transition-transform",
                            open && "rotate-180"
                        )}
                    />
                    {open ? "less" : "more"}
                </button>
            </div>
        </footer>
    );
};

export default Footer;
