import React, { useState, useEffect } from 'react';

const App = () => {
  const [wave, setWave] = useState(0);

  // Список данных о сотрудниках
  const players = [
    {
      id: 1,
      name: 'Азамат',
      nickname: 'Player1',
      hoursPlayed: 500,
      role: 'Sniper',
      elo: 1500,
    },
    {
      id: 2,
      name: 'Олжас',
      nickname: 'Player2',
      hoursPlayed: 450,
      role: 'Riffle',
      elo: 1400,
    },
    {
      id: 3,
      name: 'Темер',
      nickname: 'Player3',
      hoursPlayed: 600,
      role: 'Riffle',
      elo: 1600,
    },
    {
      id: 4,
      name: 'Нурбек',
      nickname: 'Player4',
      hoursPlayed: 550,
      role: 'Riffle',
      elo: 1550,
    },
    // Добавьте больше игроков по желанию
  ];

  // Эффект для изменения волнообразной анимации
  useEffect(() => {
    const interval = setInterval(() => {
      setWave((prevWave) => prevWave + 1);
    }, 200); // Интервал в 200 мс

    return () => clearInterval(interval);
  }, []);

  // Стили для таблицы
  const styles = {
    table: {
      borderCollapse: 'collapse',
      width: '80%',
      margin: '20px auto',
      border: '1px solid #ddd',
      fontFamily: 'Arial, sans-serif',
    },
    th: {
      padding: '12px',
      textAlign: 'left',
      backgroundColor: '#f2f2f2',
      border: '1px solid #ddd',
    },
    td: {
      padding: '12px',
      border: '1px solid #ddd',
    },
    wavyTitle: {
      textAlign: 'center', // Центрируем текст заголовка
    },
    waveEffect: {
      display: 'inline-block',
      transition: 'transform 0.2s ease-in-out',
    },
  };

  // Функция для рендеринга волнообразного заголовка
  const renderWavyTitle = () => {
    const title = 'Таблица офисных игроков CS 1.6';
    return (
      <h1 style={styles.wavyTitle}>
        {title.split('').map((char, index) => (
          <span
            key={index}
            style={{
              ...styles.waveEffect,
              transform: `translateY(${Math.sin((index + wave) * 0.3) * 10}px)`,
            }}
          >
            {char}
          </span>
        ))}
      </h1>
    );
  };

  return (
    <div>
      {renderWavyTitle()}
      <table style={styles.table}>
        <thead>
          <tr>
            <th style={styles.th}>ID</th>
            <th style={styles.th}>Имя</th>
            <th style={styles.th}>Никнейм</th>
            <th style={styles.th}>Часов сыграно</th>
            <th style={styles.th}>Роль в игре</th>
            <th style={styles.th}>ELO</th>
          </tr>
        </thead>
        <tbody>
          {players.map((player) => (
            <tr key={player.id}>
              <td style={styles.td}>{player.id}</td>
              <td style={styles.td}>{player.name}</td>
              <td style={styles.td}>{player.nickname}</td>
              <td style={styles.td}>{player.hoursPlayed}</td>
              <td style={styles.td}>{player.role}</td>
              <td style={styles.td}>{player.elo}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default App;