"use client";

import { useTranslation } from "react-i18next";
import { motion } from "framer-motion";
import { Building, Home } from "lucide-react";

const data = [
  {
    colors: "from-amber-500 to-amber-600",
    titleKey: "register.owner.step1Title",
    title2Key: "register.owner.step1bTitle",
    descKey: "register.owner.step1Desc",
    desc2Key: "register.owner.step1bDesc",
    icon: <Building className="w-10 h-10 text-white" />,
  },
  {
    colors: "from-blue-500 to-blue-600",
    titleKey: "register.tenant.step1Title",
    title2Key: "register.tenant.step2Title",
    descKey: "register.tenant.step1Desc",
    desc2Key: "register.tenant.step2Desc",
    icon: <Home className="w-10 h-10 text-white" />,
  },
];
export default function HeaderOfForm({ step = 1, num = 0 }) {
  const { t } = useTranslation();
  const currentData = data[num] || data[0];
  return (
    <div className={`bg-gradient-to-r ${currentData.colors} 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={{ y: 20, opacity: 0 }} animate={{ y: 0, opacity: 1 }} 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"
        >
          {data[num].icon}
        </motion.div>
        <h1 className="text-3xl font-bold text-white mb-2">{t(step === 1 ? t(currentData.titleKey) : t(currentData.title2Key))}</h1>
        <p className="text-amber-100">{t(step === 1 ? t(currentData.descKey) : t(currentData.desc2Key))}</p>
      </motion.div>
    </div>
  );
}