import Link from "next/link";
import { motion } from "framer-motion";
import { ArrowLeft } from "lucide-react";
import { useTranslation } from "react-i18next";

export default function HeaderOfSteps({ step, colors, numberStep }) {
  const { t } = useTranslation();
  return (
    <>
      <div className="mb-8">
        <div className="flex items-center justify-between mb-4">
          <Link href="/auth/choose-role" className="flex items-center gap-2 text-gray-400 hover:text-white transition-colors group">
            <motion.div whileHover={{ x: -5 }}>
              <ArrowLeft className="w-4 h-4" />
            </motion.div>
            <span>{t("forgotPassword.backToLogin")}</span>
          </Link>
          <span className="text-sm text-gray-200">{t("register.stepOf2", { step: step })}</span>
        </div>
        <div className="flex gap-2">
          {numberStep.map((s) => (
            <motion.div key={s} className={`h-2 flex-1 rounded-full ${step >= s ? colors : "bg-gray-800"}`} animate={{ scaleX: step >= s ? 1 : 0.5 }} />
          ))}
        </div>
      </div>
    </>
  );
}