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

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

type FooterProps = {
  isAdmin?: boolean;
};

export function Footer({ isAdmin = false }: FooterProps) {
  const locale = useLocale();
  const tNav = useTranslations("navigation");
  const tFooter = useTranslations("footer");

  return (
    <footer className="border-t border-default bg-surface-soft">
      <div className="mx-auto flex w-full max-w-6xl flex-col gap-4 px-4 py-8 sm:px-6 lg:px-8">
        <nav className="flex flex-wrap gap-4 text-sm">
          {navItems.map((item) => (
            <Link
              key={item.key}
              href={`/${locale}${item.path}`}
              className="text-muted transition hover:text-fg"
            >
              {tNav(item.key)}
            </Link>
          ))}
          {isAdmin ? (
            <a href="/root" className="text-muted transition hover:text-fg">
              {tNav("root")}
            </a>
          ) : null}
        </nav>
        <p className="text-xs text-subtle">{tFooter("copyright", { year: new Date().getFullYear() })}</p>
      </div>
    </footer>
  );
}
