Untitled

import React, { useState } from 'react';

const options = {
      races: ['Human', 'Elf', 'Dwarf', 'Beastman', 'Demon', 'Angel', 'Dragonkin', 'Titan', 'Demi-God', 'God', 'Slime', 'Goblin', 'Ratman'],
        abilities: ['Gravity Force', 'Sound Speed', 'Flight', 'Enhanced Strength', 'Sonic Sound', 'Regeneration', 'Element Control', 'Telekinesis', 'Invisibility', 'Healing', 'Weak Fire Breath', 'Minor Telepathy', 'Night Vision'],
          weapons: ['Legendary Sword', 'Divine Bow and Arrows', 'Cursed Dagger', 'Celestial Spear', 'Indestructible Shield', 'Thunder Hammer', 'Blood Axe', 'Eternal Rock', 'Gauntlet of Power', 'Ocean Trident', 'Wooden Stick', 'Rusty Knife', 'Stone Axe'],
            beasts: ['Phoenix', 'Dragon', 'Griffin', 'Cerberus', 'Chimera', 'Leviathan', 'Minotaur', 'Hydra', 'Basilisk', 'Thunderbird', 'Rat', 'Slime Beast', 'Giant Ant'],
              beastAbilities: ['Fire Breath', 'Flight', 'Immortality', 'Poisonous Bite', 'Super Strength', 'Water Control', 'Lightning Strike', 'Regeneration', 'Petrification', 'Earth Manipulation', 'Weak Poison Spray', 'Slow Movement', 'Minor Camouflage']
};

const CharacterStatsSpinner = () => {
      const [result, setResult] = useState('');

        const handleSpin = (category) => {
                const items = options[category];
                    const randomItem = items[Math.floor(Math.random() * items.length)];
                        setResult(randomItem);
        };

          return (
                <div className="flex flex-col items-center justify-center h-screen space-y-4 bg-gray-100">
                      <div className="text-2xl font-bold mb-4">{result || 'Click a button to spin!'}</div>
                            <button className="px-4 py-2 bg-blue-500 text-white rounded" onClick={() => handleSpin('races')}>Spin Race</button>
                                  <button className="px-4 py-2 bg-blue-500 text-white rounded" onClick={() => handleSpin('abilities')}>Spin Ability</button>
                                        <button className="px-4 py-2 bg-blue-500 text-white rounded" onClick={() => handleSpin('weapons')}>Spin Weapon</button>
                                              <button className="px-4 py-2 bg-blue-500 text-white rounded" onClick={() => handleSpin('beasts')}>Spin Beast</button>
                                                    <button className="px-4 py-2 bg-blue-500 text-white rounded" onClick={() => handleSpin('beastAbilities')}>Spin Beast Ability</button>
                                                        </div>
          );
};

export default CharacterStatsSpinner;
          )
        }
}
}