"use client";

import { useTranslations } from "next-intl";
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-2 px-4 py-8 text-sm text-zinc-600 sm:flex-row sm:items-center sm:justify-between sm:px-6 dark:text-zinc-400">
        <p>
          © {year} {appName}. {t("footer")}
        </p>
        <p className="font-mono text-xs text-zinc-500 dark:text-zinc-500">
          Phase 0 · Frontend Foundation
        </p>
      </div>
    </footer>
  );
}
