"use client";

import { useUmami } from "@danielgtmn/umami-react";
import { Github, Mail, MessageSquare } from "lucide-react";

export function Footer() {
  const currentYear = new Date().getFullYear();
  const { track } = useUmami();

  const handleLinkClick = (name: string, url: string) => {
    track(`footer_click_${name.toLowerCase()}`, { url });
  };

  return (
    <footer className="w-full border-t border-white/5 py-8 mt-20">
      <div className="max-w-7xl mx-auto px-6 flex flex-col items-center gap-6">
        {/* Social Icons Row */}
        <div className="flex items-center gap-6 text-gray-400">
          <a
            href="https://github.com/Space-Banane"
            target="_blank"
            rel="noreferrer"
            className="hover:text-purple-400 transition-colors"
            aria-label="GitHub"
            onClick={() =>
              handleLinkClick("GitHub", "https://github.com/Space-Banane")
            }
          >
            <Github className="w-5 h-5" />
          </a>
          <a
            href="mailto:space@reversed.dev"
            className="hover:text-purple-400 transition-colors"
            aria-label="Email"
            onClick={() =>
              handleLinkClick("Email", "mailto:space@reversed.dev")
            }
          >
            <Mail className="w-5 h-5" />
          </a>
          <a
            href="https://discord.com/users/456443941169004545"
            target="_blank"
            rel="noreferrer"
            className="hover:text-purple-400 transition-colors"
            aria-label="Discord"
            onClick={() =>
              handleLinkClick(
                "Discord",
                "https://discord.com/users/456443941169004545",
              )
            }
          >
            <MessageSquare className="w-5 h-5" />
          </a>
        </div>

        {/* Branding & Attribution */}
        <div className="flex flex-col items-center gap-2 text-center">
          <p className="text-gray-500 text-xs tracking-wide">
            &copy; {currentYear} &bull; Space-Banane
          </p>
          <div className="flex items-center gap-3 text-[10px] text-gray-600 uppercase tracking-[0.2em]">
            <a
              href="https://github.com/Space-Banane/shsf"
              target="_blank"
              rel="noreferrer"
              className="hover:text-gray-400 transition-colors"
              onClick={() =>
                handleLinkClick("SHSF", "https://github.com/Space-Banane/shsf")
              }
            >
              SHSF
            </a>
            <span>&bull;</span>
            <a
              href="https://gradienty.codes/"
              target="_blank"
              rel="noreferrer"
              className="hover:text-gray-400 transition-colors"
              onClick={() =>
                handleLinkClick("Gradienty", "https://gradienty.codes/")
              }
            >
              Gradienty
            </a>
            <span>&bull;</span>
            <span>React</span>
          </div>
        </div>
      </div>
    </footer>
  );
}
