"use client";
import { useState, useEffect } from "react";
import { motion, AnimatePresence, useReducedMotion } from "framer-motion";
import { type Lang } from "@/lib/config";

interface HeroAnimationsProps {
  lang: Lang;
}

export default function HeroAnimations({ lang }: HeroAnimationsProps) {
  const isAr = lang === "ar";
  const shouldReduceMotion = useReducedMotion();
  const [currentWord, setCurrentWord] = useState(0);

  const gradientClass =
    "bg-gradient-to-r from-emerald-400 to-teal-300 bg-clip-text text-transparent";

  const rotatingWords = isAr
    ? [
        { text: "المطاعم والمقاهي", color: gradientClass },
        { text: "العيادات الطبية", color: gradientClass },
        { text: "الفنادق والمنتجعات", color: gradientClass },
        { text: "مراكز التجميل", color: gradientClass },
        { text: "صالونات الشعر", color: gradientClass },
        { text: "المراكز الرياضية", color: gradientClass },
        { text: "عيادات الأسنان", color: gradientClass },
        { text: "مراكز السبا", color: gradientClass },
        { text: "الخدمات المنزلية", color: gradientClass },
        { text: "مراكز الصيانة", color: gradientClass },
      ]
    : [
        { text: "Restaurants & Cafes", color: gradientClass },
        { text: "Medical Clinics", color: gradientClass },
        { text: "Hotels & Resorts", color: gradientClass },
        { text: "Beauty Centers", color: gradientClass },
        { text: "Hair Salons", color: gradientClass },
        { text: "Fitness Centers", color: gradientClass },
        { text: "Dental Practices", color: gradientClass },
        { text: "Spa & Wellness", color: gradientClass },
        { text: "Home Services", color: gradientClass },
        { text: "Service Centers", color: gradientClass },
      ];

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentWord((prev) => (prev + 1) % rotatingWords.length);
    }, 3000);
    return () => clearInterval(interval);
  }, [rotatingWords.length]);

  const spring = { type: "spring" as const, stiffness: 120, damping: 20 };

  return (
    <span className="inline-block min-w-[320px] sm:min-w-[400px] text-center relative overflow-hidden align-bottom">
      <AnimatePresence mode="wait">
        <motion.span
          key={currentWord}
          className={`inline-block font-bold ${rotatingWords[currentWord]?.color || "text-cyan-400"}`}
          initial={
            shouldReduceMotion
              ? { opacity: 0 }
              : { opacity: 0, y: 30, filter: "blur(4px)" }
          }
          animate={
            shouldReduceMotion
              ? { opacity: 1 }
              : { opacity: 1, y: 0, filter: "blur(0px)" }
          }
          exit={
            shouldReduceMotion
              ? { opacity: 0 }
              : { opacity: 0, y: -30, filter: "blur(4px)" }
          }
          transition={shouldReduceMotion ? { duration: 0.2 } : spring}
        >
          {rotatingWords[currentWord]?.text || ""}
        </motion.span>
      </AnimatePresence>
    </span>
  );
}