برنامج اختيار الأشخاص

import React, { useState } from 'react';
import './App.css';

const App = () => {
  const [selectedPerson, setSelectedPerson] = useState(null);
  const [rotation, setRotation] = useState(0);

  const people = [
    { id: 1, name: 'John Doe', image: 'https://placehold.co/100x100' },
    { id: 2, name: 'Jane Smith', image: 'https://placehold.co/100x100' },
    { id: 3, name: 'Mike Johnson', image: 'https://placehold.co/100x100' },
    { id: 4, name: 'Emily Davis', image: 'https://placehold.co/100x100' },
    { id: 5, name: 'David Wilson', image: 'https://placehold.co/100x100' },
  ];

  const spinWheel = () => {
    const degrees = 360 * 5 + Math.floor(Math.random() * 360);
    setRotation(degrees);
    const selected = people[Math.floor(Math.random() * people.length)];
    setSelectedPerson(selected);
  };

  return (
    <div className='flex flex-col items-center justify-center min-h-screen bg-gray-100'>
      <h1 className='text-4xl font-bold mb-8'>Person Picker</h1>
      <div className='relative w-64 h-64'>
        <div
          className='absolute w-full h-full rounded-full bg-gradient-to-r from-blue-500 to-purple-500'
          style={{
            transform: `rotate(${rotation}deg)`,
            transition: 'transform 3s ease-out',
          }}
        />
        <div className='absolute w-full h-full flex items-center justify-center'>
          <div className='w-10 h-10 bg-white rounded-full shadow-lg' />
        </div>
      </div>
      <button
        className='mt-8 px-6 py-2 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700'
        onClick={spinWheel}
      >
        Spin
      </button>
      {selectedPerson && (
        <div className='mt-8'>
          <img src={selectedPerson.image} alt={selectedPerson.name} className='w-24 h-24 rounded-full' />
          <h2 className='text-2xl font-bold mt-4'>{selectedPerson.name}</h2>
        </div>
      )}
      <footer className='mt-12 text-gray-600'>
        © 2025 Person Picker. All rights reserved.
      </footer>
    </div>
  );
};

export default App;