"use client";

import { memo } from "react";
import { Link, useTranslation } from "@/i18n/navigation";
import { FOOTER_SECTIONS } from "@/config";

function FooterComponent() {
  const { t } = useTranslation("footer");
  const { t: tCommon } = useTranslation("common");

  return (
    <footer className="border-t border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900">
      <div className="max-w-[1400px] mx-auto px-5 sm:px-10 py-10 sm:py-12">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-6 sm:gap-8 mb-8">
          {FOOTER_SECTIONS.map((section) => (
            <div key={section.titleKey}>
              <h4 className="font-bold text-gray-900 dark:text-gray-100 text-sm mb-3">
                {t(section.titleKey)}
              </h4>
              <ul className="space-y-2 text-sm text-gray-500 dark:text-gray-400">
                {section.links.map((link) => (
                  <li key={link.labelKey}>
                    {link.href.startsWith("/") ? (
                      <Link
                        href={link.href}
                        className="hover:text-gray-700 dark:hover:text-gray-200 transition-colors"
                      >
                        {t(`links.${link.labelKey}`)}
                      </Link>
                    ) : (
                      <a
                        href={link.href}
                        className="hover:text-gray-700 dark:hover:text-gray-200 transition-colors"
                      >
                        {t(`links.${link.labelKey}`)}
                      </a>
                    )}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div className="pt-8 border-t border-gray-200 dark:border-gray-800 flex flex-col sm:flex-row items-center justify-between gap-4">
          <div className="flex items-center gap-2">
            <span className="text-xl">🌏</span>
            <span className="text-sm font-bold text-gray-900 dark:text-gray-100">{tCommon("siteNameShort")}</span>
          </div>
          <p className="text-xs text-gray-400 dark:text-gray-500">
            {t("copyright")}
          </p>
          <div className="flex items-center gap-4 text-xs text-gray-400 dark:text-gray-500">
            <span>{tCommon("currency") || "CNY ¥"}</span>
            <span>°C</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

export default memo(FooterComponent);