"use client";

import React, { useState } from "react";
import Link from "next/link";
import { FooterColumn } from "@/types/navigation";

interface FooterColProps {
  column: FooterColumn;
}

/**
 * Real `.fheading`/`.footerlink-list` styling from `_footer.scss`: 17px
 * white heading, 14px `#dfdfdf` links turning `#f58e0e` (the site's orange)
 * on hover. Below 768px the live site collapses each column into a tap-to-
 * expand accordion (`.footerlinksbox .fheading` gets a `+`/`-` indicator via
 * `::after`, `.footerlink-list{display:none}` until toggled) — this is
 * `max-md:hidden`/`md:block` plus local state doing the same thing, scoped
 * so it's a no-op at `md` and up (`md:block` always wins there regardless of
 * state), matching the real site leaving `.contactbx` (the one footer
 * column without this treatment) always expanded.
 */
export const FooterCol: React.FC<FooterColProps> = ({ column }) => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className="border-b border-white/10 pb-2 md:border-0 md:pb-0">
      <button
        type="button"
        onClick={() => setIsOpen((prev) => !prev)}
        aria-expanded={isOpen}
        className="flex w-full items-center justify-between py-2 text-left text-[17px] leading-[23px] text-white md:pointer-events-none md:py-0 md:mb-2"
      >
        {column.title}
        <span className="text-xl leading-none text-[#dfdfdf] md:hidden" aria-hidden="true">
          {isOpen ? "−" : "+"}
        </span>
      </button>
      <ul className={`${isOpen ? "block" : "hidden"} md:block pt-2.5 pb-2 md:pb-0 space-y-2.5`}>
        {column.links.map((link) => (
          <li key={link.label} className="text-sm leading-[18px]">
            {/* `prefetch={false}` — these ~25+ links render unconditionally on every
                page load (not behind a click), so Next.js's default auto-prefetch
                fired a burst of simultaneous `_rsc=` requests on load. On the beta
                deployment this burst was large enough to trip the host's rate
                limiter (observed: most of them coming back `429`). Footer links are
                rarely the visitor's immediate next click, so eager prefetch wasn't
                buying much anyway. */}
            <Link
              href={link.href}
              prefetch={false}
              className="text-[#dfdfdf] hover:text-[#f58e0e] transition-colors"
            >
              {link.label}
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
};