songs2vid/components/LegalFooter.tsx

import Link from "next/link";
import type { ReactNode } from "react";
import { DOCS_URL, GITEA_URL } from "@/lib/plans";

function LegalLink({
  href,
  children,
  external,
}: {
  href: string;
  children: ReactNode;
  external?: boolean;
}) {
  const className = "transition-colors duration-300 hover:text-gray-300";

  if (external) {
    return (
      <a href={href} target="_blank" rel="noopener noreferrer" className={className}>
        {children}
      </a>
    );
  }

  return (
    <Link href={href} className={className}>
      {children}
    </Link>
  );
}

export function LegalFooter() {
  const year = new Date().getFullYear();

  return (
    <footer className="mt-auto w-full border-t border-gray-800 bg-black/40 py-8 text-xs text-gray-500">
      <div className="mx-auto flex max-w-4xl flex-wrap items-center justify-center gap-x-4 gap-y-2 px-6 md:justify-start">
        <span>© {year} Songs2VID. MIT licensed.</span>
        <span aria-hidden="true" className="hidden sm:inline">
          |
        </span>
        <span>
          Made with ❤ by{" "}
          <LegalLink href="https://www.atakanozban.com" external>
            atakan
          </LegalLink>
        </span>
        <span aria-hidden="true" className="hidden sm:inline">
          |
        </span>
        <LegalLink href="/privacy">Privacy Policy</LegalLink>
        <span aria-hidden="true" className="hidden sm:inline">
          |
        </span>
        <LegalLink href="/terms">Terms of Use</LegalLink>
        <span aria-hidden="true" className="hidden sm:inline">
          |
        </span>
        <LegalLink href={DOCS_URL} external>
          Documentation
        </LegalLink>
        <span aria-hidden="true" className="hidden sm:inline">
          |
        </span>
        <LegalLink href={GITEA_URL} external>
          Source
        </LegalLink>
      </div>
    </footer>
  );
}