import Link from "next/link";
import { useLocale, useTranslations } from "next-intl";

import { Container } from "@/components/layout/container";
import { getLocalizedPath } from "@/lib/locale";

const navItems = [
  { key: "home", path: "" },
  { key: "portfolio", path: "/portfolio" },
  { key: "about", path: "/about" },
  { key: "contact", path: "/contact" },
];

export function SiteFooter() {
  const locale = useLocale();
  const tNav = useTranslations("navigation");
  const tFooter = useTranslations("footer");

  return (
    <footer className="border-t border-border bg-background">
      <Container className="flex flex-col gap-4 py-8">
        <nav className="flex flex-wrap gap-x-5 gap-y-3 text-sm">
          {navItems.map((item) => (
            <Link
              key={item.key}
              href={getLocalizedPath(locale, item.path || "/")}
              className="text-muted-foreground hover:text-foreground"
            >
              {tNav(item.key)}
            </Link>
          ))}
        </nav>
        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
          <p className="text-xs text-muted-foreground/80">
            {tFooter("copyright", { year: new Date().getFullYear() })}
          </p>
        </div>
      </Container>
    </footer>
  );
}
