"use client";

import Link from "next/link";
import { changelogData } from "@/lib/changelog-data";
import { useTranslations } from "next-intl";
import { LanguageSwitcher } from "./language-switcher";

export function Footer() {
  const t = useTranslations("Footer");
  const latestVersion = changelogData[0]?.version;

  return (
    <footer className="w-full border-t bg-background">
      <div className="container relative mx-auto flex h-16 items-center justify-between px-4 md:px-6">
        <div className="text-sm text-muted-foreground">
          <p>{t("copyright", { year: new Date().getFullYear() })}</p>
        </div>

        <div className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center gap-1">
          <LanguageSwitcher />
        </div>

        <div className="flex items-center gap-4 text-sm text-muted-foreground">
          <Link href="/imprint" className="hover:text-primary transition-colors">{t("imprint")}</Link>
          <Link href="/privacy" className="hover:text-primary transition-colors">{t("privacy")}</Link>
          {latestVersion && (
            <Link
              href="/changelog"
              className="hover:text-primary transition-colors"
            >
              v{latestVersion}
            </Link>
          )}
        </div>
      </div>
    </footer>
  );
}