import React, { useEffect, useState } from "react";
import { motion } from "framer-motion";
const countries = [
{ name: "Qatar", position: { top: "50%", left: "60%" } },
{ name: "Germany", position: { top: "40%", left: "30%" } },
{ name: "France", position: { top: "42%", left: "28%" } },
{ name: "Kuwait", position: { top: "55%", left: "65%" } },
{ name: "Iraq", position: { top: "52%", left: "58%" } },
{ name: "Spain", position: { top: "45%", left: "20%" } },
{ name: "Emirates", position: { top: "53%", left: "67%" } },
];
const CountrySliderMap = () => {
const [activeIndex, setActiveIndex] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
setActiveIndex((prevIndex) => (prevIndex + 1) % countries.length);
}, 3000);
return () => clearInterval(interval);
}, []);
return (
{countries.map((country, index) => (
);
};
export default CountrySliderMap;
{countries.map((country, index) => (
{country.name}
))}