import Link from "next/link";
import type { ReactNode } from "react";

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} Songs2YT. All rights reserved.</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 Service</LegalLink>
        <span aria-hidden="true" className="hidden sm:inline">
          |
        </span>
        <LegalLink href="/refund">Refund Policy</LegalLink>
        <span aria-hidden="true" className="hidden sm:inline">
          |
        </span>
        <LegalLink href="https://status.atakanozban.com/status/2" external>
          Service Status
        </LegalLink>
      </div>
    </footer>
  );
}
