"use client";
import { Github, Linkedin, Mail, Terminal } from "lucide-react";
import { usePathname } from "next/navigation";
import { NavLinks, ContactUrls } from "@/lib/constant";

export function Footer() {
  const pathname = usePathname();
  if (pathname?.startsWith("/dashboard")) return null;

  return (
    <footer className="border-t border-border bg-surface/30">
      <div className="max-w-6xl mx-auto px-6 py-12">
        <div className="flex flex-col md:flex-row items-center justify-between gap-8">
          {/* Logo */}
          <div className="flex items-center gap-2">
            <div className="w-7 h-7 rounded-md bg-accent/20 border border-accent/30 flex items-center justify-center">
              <Terminal size={14} className="text-accent" />
            </div>
            <span className="font-display font-semibold text-foreground text-sm">
              fikri<span className="text-accent">.</span>maulana
            </span>
          </div>

          {/* Nav links */}
          <nav className="flex items-center gap-6">
            {NavLinks.map((link) => (
              <a
                key={link.href}
                href={link.href}
                className="text-sm text-foreground-muted hover:text-foreground transition-colors"
              >
                {link.label}
              </a>
            ))}
          </nav>

          {/* Social */}
          <div className="flex items-center gap-3">
            <a
              href={ContactUrls.github}
              target="_blank"
              rel="noopener noreferrer"
              className="p-2 rounded-lg text-foreground-muted hover:text-foreground hover:bg-surface-elevated transition-all"
              aria-label="GitHub"
            >
              <Github size={18} />
            </a>
            <a
              href={ContactUrls.linkedin}
              target="_blank"
              rel="noopener noreferrer"
              className="p-2 rounded-lg text-foreground-muted hover:text-foreground hover:bg-surface-elevated transition-all"
              aria-label="LinkedIn"
            >
              <Linkedin size={18} />
            </a>
            <a
              href={ContactUrls.email}
              className="p-2 rounded-lg text-foreground-muted hover:text-foreground hover:bg-surface-elevated transition-all"
              aria-label="Email"
            >
              <Mail size={18} />
            </a>
          </div>
        </div>

        <div className="mt-8 pt-8 border-t border-border/50 flex flex-col sm:flex-row items-center justify-between gap-4">
          <p className="text-xs text-foreground-subtle font-mono">
            © {new Date().getFullYear()} Fikri Maulana. Built with Next.js &
            TailwindCSS.
          </p>
          <p className="text-xs text-foreground-subtle">
            Designed with precision. Engineered for scale.
          </p>
        </div>
      </div>
    </footer>
  );
}
