import { env } from "../../lib/env";
import { HeartIcon } from "lucide-react";
import Link from "../Link";
import cn from "../../lib/helpers/classnames";
import * as config from "../../lib/config";
import type { ComponentPropsWithoutRef } from "react";

export type FooterProps = ComponentPropsWithoutRef<"footer">;

const Footer = ({ className, ...rest }: FooterProps) => {
  return (
    <footer
      className={cn("bg-background-outer w-full border-t border-t-gray-300 py-4 text-gray-700", className)}
      {...rest}
    >
      <div className="max-w-default mx-auto flex w-full flex-col justify-between px-5 text-[0.8rem] leading-9 md:flex-row">
        <div>
          Content{" "}
          <Link href="/license" title={config.license} className="text-gray-700 hover:no-underline">
            licensed under {config.licenseAbbr}
          </Link>
          ,{" "}
          <Link href="/previously" title="Previously on..." className="text-gray-700 hover:no-underline">
            {config.copyrightYearStart}
          </Link>{" "}
          – {new Date().getUTCFullYear()}.
        </div>

        <div>
          Made with{" "}
          <HeartIcon
            size="1.25em"
            fill="currentColor"
            className="animate-heartbeat text-error mx-0.25 inline h-[1.25em] w-[1.25em] align-text-top"
          />{" "}
          and{" "}
          <Link
            href="https://nextjs.org/"
            title="Powered by Next.js"
            aria-label="Next.js"
            className="text-gray-700 hover:text-gray-600 hover:no-underline"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="currentColor"
              stroke="currentColor"
              strokeWidth="0"
              viewBox="0 0 24 24"
              width="1.25em"
              height="1.25em"
              className="mx-0.25 inline h-[1.25em] w-[1.25em] align-text-top"
            >
              <path d="M18.665 21.978C16.758 23.255 14.465 24 12 24 5.377 24 0 18.623 0 12S5.377 0 12 0s12 5.377 12 12c0 3.583-1.574 6.801-4.067 9.001L9.219 7.2H7.2v9.596h1.615V9.251l9.85 12.727Zm-3.332-8.533 1.6 2.061V7.2h-1.6v6.245Z" />
            </svg>
          </Link>
          .{" "}
          <Link
            href={`https://github.com/${env.NEXT_PUBLIC_GITHUB_REPO}`}
            title="View Source on GitHub"
            className="border-b-2 border-b-gray-400 pb-0.5 text-gray-700 hover:border-b-gray-300 hover:no-underline"
          >
            View source.
          </Link>
        </div>
      </div>
    </footer>
  );
};

export default Footer;