import { Link } from "react-router";

const FOOTER_LINKS = [
  { label: "Home", to: "/" },
  { label: "Rules", to: "/rules" },
  { label: "How to Play", to: "/how-to-play" },
  { label: "Sports", to: "/sports" },
  { label: "Support", to: "/support" },
  { label: "Privacy Policy", to: "/privacy-policy" },
];

export function Footer() {
  return (
    <footer
      className="flex flex-col items-start gap-3 border-t px-10 py-5 text-xs sm:flex-row sm:items-center sm:justify-between text-muted-foreground"
    >
      <span>© 2026 Brackt. All rights reserved.</span>
      <nav className="flex gap-5">
        {FOOTER_LINKS.map(({ label, to }) => (
          <Link
            key={label}
            to={to}
            className="transition-colors hover:text-muted-foreground"
            style={{ color: "inherit" }}
          >
            {label}
          </Link>
        ))}
      </nav>
    </footer>
  );
}