'use client';

/**
 * Lab Footer Component
 *
 * Simple 1-line footer for lab section with contextual navigation links.
 * Displays copyright on left and contextual docs/API links on right.
 * Uses zinc color palette.
 */

import { usePathname } from 'next/navigation';
import Link from 'next/link';
import { BookOpen, Code } from 'lucide-react';

type LinkMapEntry = {
  docs: string;
  api: string;
};

type LinkMap = {
  [key: string]: LinkMapEntry;
};

const linkMap: LinkMap = {
  '/lab/generate': { docs: '/docs', api: '/docs/api/text-to-image' },
  '/lab/images': { docs: '/docs', api: '/docs/api/images' },
  '/lab/live': { docs: '/docs', api: '/docs/api/text-to-image' },
  '/lab/upload': { docs: '/docs', api: '/docs/api/upload' },
};

export const LabFooter = () => {
  const pathname = usePathname();
  const links = linkMap[pathname] || { docs: '/docs', api: '/docs/api' };

  return (
    <footer
      className="border-t border-zinc-800 bg-zinc-950/50 backdrop-blur-sm"
      role="contentinfo"
    >
      <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-3 md:gap-0 px-4 py-3 md:h-12">
        {/* Left: Copyright */}
        <p className="text-xs text-zinc-500 order-2 md:order-1">
          © 2025 Banatie. Built for builders who create.
        </p>

        {/* Right: Contextual Links */}
        <nav aria-label="Footer navigation" className="flex items-center gap-4 order-1 md:order-2">
          <Link
            href={links.docs}
            className="text-xs text-zinc-500 hover:text-white transition-colors flex items-center gap-1.5"
          >
            <BookOpen className="w-3.5 h-3.5" />
            Documentation
          </Link>
          <Link
            href={links.api}
            className="text-xs text-zinc-500 hover:text-white transition-colors flex items-center gap-1.5"
          >
            <Code className="w-3.5 h-3.5" />
            API Reference
          </Link>
        </nav>
      </div>
    </footer>
  );
};