import { useTranslations } from "@/i18n/utils";
import type { Lang } from "@/types/i18n";
import { personalInfo } from "@/lib/data/index";
import { useState, useEffect } from "react";
import { defaultLang } from "@/i18n/ui";
import Container from "./ui/Container.tsx";
import { type FooterProps } from "@/types";

export default function Footer({ lang: propLang }: FooterProps) {
  const [lang, setLang] = useState<Lang>(propLang || defaultLang);

  useEffect(() => {
    const htmlLang = document.documentElement.lang as Lang;
    if (htmlLang && (!propLang || htmlLang !== lang)) {
      setLang(htmlLang);
    }
  }, [propLang, lang]);

  const t = useTranslations(lang);
  return (
    <footer className="border-t border-primary/10 py-6 bg-gradient-to-b from-background to-muted/20 backdrop-blur-sm">
      <Container>
        <div
          className="flex flex-col md:flex-row justify-between items-center"
        >
          <div className="flex flex-col gap-2">
            <p
              className="text-sm text-muted-foreground text-center md:text-left hover:scale-[1.01] transition-transform"
            >
              &copy; {new Date().getFullYear()} { personalInfo.name }. {t('footer.rights')} ✨
            </p>
            <p
              className="text-sm text-primary font-medium text-center md:text-left hover:scale-[1.01] transition-transform"
            >
              {lang === 'zh' ? '正在招聘远程工程师或寻求项目合作？欢迎联系我。' : 'Hiring for a remote engineering role or looking for project collaboration? Let’s connect.'}
            </p>
          </div>
          <p
            className="text-sm text-muted-foreground mt-2 md:mt-0 text-center md:text-left hover:scale-[1.01] transition-transform"
          >
            Built with{" "}
            <span
              className="inline-block hover:rotate-360 transition-transform duration-500"
            >
              💻
            </span>{" "}
            and{" "}
            <span
              className="inline-block animate-pulse"
            >
              ❤️
            </span>
          </p>
        </div>
      </Container>
    </footer>
  );
}
