import { Heart } from "lucide-react";

const footerLinkClass =
  "text-xs text-zinc-500 underline decoration-zinc-700 underline-offset-2 transition-colors hover:text-accent-400";

export function Footer() {
  return (
    <footer className="shrink-0 border-t border-zinc-800/60">
      <div className="mx-auto flex max-w-7xl flex-col items-center gap-2 px-4 py-3 text-center sm:flex-row sm:items-center sm:justify-between sm:gap-4 sm:px-6 sm:py-2 sm:text-left">
        <a
          href="https://limic.dev"
          target="_blank"
          rel="noopener noreferrer"
          className={`m-0 flex items-center gap-1 ${footerLinkClass}`}
        >
          Made with
          <Heart className="inline h-3 w-3 text-accent-500" fill="currentColor" strokeWidth={0} aria-hidden="true" />
          on Cloudflare
        </a>
        <a
          href="https://git.limic.dev/rachel/dab"
          target="_blank"
          rel="noopener noreferrer"
          className={footerLinkClass}
        >
          Source code
        </a>
      </div>
    </footer>
  );
}