"use client";

import { useTranslations } from "next-intl";
import { Link } from "@/i18n/navigation";
import { getAppName } from "@/lib/env";

export function Footer() {
  const t = useTranslations("common");
  const appName = getAppName();
  const year = new Date().getFullYear();

  return (
    <footer className="border-t border-zinc-200 bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-950">
      <div className="mx-auto flex max-w-6xl flex-col gap-4 px-4 py-8 sm:px-6">
        <nav className="flex flex-wrap gap-4 text-sm text-zinc-600 dark:text-zinc-400">
          <Link href="/impressum" className="hover:text-zinc-900 dark:hover:text-zinc-100">
            {t("impressum")}
          </Link>
          <Link href="/privacy" className="hover:text-zinc-900 dark:hover:text-zinc-100">
            {t("privacy")}
          </Link>
          <Link href="/terms" className="hover:text-zinc-900 dark:hover:text-zinc-100">
            {t("terms")}
          </Link>
          <Link href="/status" className="hover:text-zinc-900 dark:hover:text-zinc-100">
            {t("status")}
          </Link>
        </nav>
        <div className="flex flex-col gap-2 text-sm text-zinc-600 sm:flex-row sm:items-center sm:justify-between dark:text-zinc-400">
          <p>
            © {year} {appName}. {t("footer")}
          </p>
          <p className="font-mono text-xs text-zinc-500 dark:text-zinc-500">{t("phaseBadge")}</p>
        </div>
      </div>
    </footer>
  );
}