import { useTranslations } from "@/i18n/utils";
import type { Lang } from "@/types/i18n";
import { personalInfo } from "@/lib/data/index";
import { motion } from "framer-motion";
import { useState, useEffect } from "react";
import { defaultLang } from "@/i18n/ui";
import Container from "./ui/Container";
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-purple-500/10 py-6 bg-gradient-to-b from-background to-muted/20 backdrop-blur-sm">
      <Container>
        <motion.div
          className="flex flex-col md:flex-row justify-between items-center"
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
          viewport={{ once: true }}
        >
          <motion.div className="flex flex-col gap-2">
            <motion.p
              className="text-sm text-muted-foreground text-center md:text-left"
              whileHover={{ scale: 1.01 }}
            >
              &copy; {new Date().getFullYear()} { personalInfo.name }. {t('footer.rights')} ✨
            </motion.p>
            <motion.p
              className="text-sm text-purple-500 font-medium text-center md:text-left"
              whileHover={{ scale: 1.01 }}
            >
              {lang === 'zh' ? '如果你正在寻找一名前端/Ts全栈工程师（远程工作），请联系我！' : 'Looking for a Frontend/TS Full-stack Engineer (Remote)? Contact me!'}
            </motion.p>
          </motion.div>
          <motion.p
            className="text-sm text-muted-foreground mt-2 md:mt-0 text-center md:text-left"
            initial={{ opacity: 0 }}
            whileInView={{ opacity: 1 }}
            transition={{ delay: 0.2, duration: 0.5 }}
            viewport={{ once: true }}
            whileHover={{ scale: 1.01 }}
          >
            Built with{" "}
            <motion.span
              className="inline-block"
              initial={{ rotate: 0 }}
              whileHover={{ rotate: 360 }}
              transition={{ duration: 0.5 }}
            >
              💻
            </motion.span>{" "}
            and{" "}
            <motion.span
              className="inline-block"
              animate={{
                scale: [1, 1.2, 1],
              }}
              transition={{
                repeat: Infinity,
                repeatType: "reverse",
                duration: 1.5,
              }}
            >
              ❤️
            </motion.span>
          </motion.p>
        </motion.div>
      </Container>
    </footer>
  );
}