import React, { useState, useRef } from "react";
import { motion } from "framer-motion";
// Generate 100 random names
const generateNames = () => {
const firstNames = ["Max", "Lily", "Jake", "Ella", "Noah", "Ava", "Leo", "Mia", "Eli", "Zoe"];
const lastNames = ["Smith", "Brown", "Lee", "Wilson", "Taylor", "Martin", "Clark", "Hall", "Young", "Wright"];
return Array.from({ length: 100 }, () => {
const first = firstNames[Math.floor(Math.random() * firstNames.length)];
const last = lastNames[Math.floor(Math.random() * lastNames.length)];
return `${first} ${last}`;
});
};
const names = generateNames();
const SpinWheel = () => {
const [spinning, setSpinning] = useState(false);
const [angle, setAngle] = useState(0);
const [winner, setWinner] = useState("");
const wheelRef = useRef(null);
const spin = () => {
if (spinning) return;
const index = Math.floor(Math.random() * names.length);
const slice = 360 / names.length;
const targetAngle = 360 * 5 + index * slice + slice / 2;
setAngle(targetAngle);
setSpinning(true);
setTimeout(() => {
setWinner(names[index]);
setSpinning(false);
}, 5000);
};
return (
🎉 Tribe Name Wheel 🎉
{names.map((name, i) => (
))}
{winner && !spinning && (
🎁 Winner: {winner}
)}
);
};
export default SpinWheel;
