import { motion } from "framer-motion";
import { itemVariants } from "../Animation/HeaderLoginAnimation";
import { ArrowLeft, KeyRound,Home } from "lucide-react";
import { useTranslation } from "react-i18next";
import Link from "next/link";
//Back Link
export function BackLink() {
  const { t } = useTranslation();
  return (
    <>
      <motion.div variants={itemVariants} className="absolute -top-16 left-0">
        <Link href="/" className="group flex items-center gap-2 text-gray-400 hover:text-white transition-colors">
          <motion.div whileHover={{ x: -5 }} transition={{ type: "spring", stiffness: 400 }}>
            <ArrowLeft className="w-4 h-4" />
          </motion.div>
          <span>{t("backToHome")}</span>
        </Link>
      </motion.div>
    </>
  );
}

export function HeaderForm({ step }) {
    const { t } = useTranslation();
  return (
    <>
      <div className="bg-gradient-to-r from-amber-700 to-amber-400 p-8 text-center relative overflow-hidden">
        <motion.div initial={{ scale: 0 }} animate={{ scale: 1 }} transition={{ delay: 0.2, type: "spring" }} className="absolute -top-10 -right-10 w-40 h-40 bg-white/10 rounded-full" />
        <motion.div initial={{ scale: 0 }} animate={{ scale: 1 }} transition={{ delay: 0.3, type: "spring" }} className="absolute -bottom-10 -left-10 w-40 h-40 bg-white/10 rounded-full" />

        <motion.div initial={{ y: 20, opacity: 0 }} animate={{ y: 0, opacity: 1 }} transition={{ delay: 0.2 }} className="relative z-10">
          <motion.div
            animate={{ rotate: [0, 10, -10, 0] }}
            transition={{ duration: 2, repeat: Infinity }}
            className="w-20 h-20 mx-auto mb-4 bg-white/20 rounded-2xl flex items-center justify-center backdrop-blur-sm"
          >
            {step === "otp" ? <KeyRound className="w-10 h-10 text-white" /> : <Home className="w-10 h-10 text-white" />}
          </motion.div>
          <h1 className="text-3xl font-bold text-white mb-2">SweetHome</h1>
          <p className="text-amber-100">{step === "otp" ? t("enterOTP") : t("welcomeBack")}</p>
        </motion.div>
      </div>
    </>
  );
}