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

export const LoadingTeamsForm = (): JSX.Element => {
  const [user, setUser] = useState([]);
   useEffect(() => {
    fetch('/api/loadingLegisteredCommands', { method: 'POST'})
    .then(res => res.json())
    .then(json => setUser(json))
  },[1]);
   console.log(user)
  return (
    <><div className="relative overflow-x-auto shadow-md sm:rounded-lg">
    <div className="px-4 sm:px-2 m-4 block">
      <h3 className="text-lg font-medium leading-6">Зарегистрированные команды</h3>
    </div>
    <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
        <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
            <tr>
                <th scope="col" className="px-6 py-3">
                  Название команды
                </th>
                <th scope="col" className="px-6 py-3">
                  Учебное заведение
                </th>
                <th scope="col" className="px-6 py-3">
                  ФИО участников
                </th>
                <th scope="col" className="px-6 py-3">
                  Класс
                </th>
            </tr>
        </thead>
    </table>
</div>
      <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
        <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
          <tr>
            <th scope="col" className="px-6 py-3">
              Название команды
            </th>
            <th scope="col" className="px-6 py-3">
              ФИО тренера
            </th>
            <th scope="col" className="px-6 py-3">
              Учебное заведение
            </th>
            <th scope="col" className="px-6 py-3">
              ФИО участников
            </th>
            <th scope="col" className="px-6 py-3">
              Класс
            </th>
          </tr>
        </thead>
        <tbody>
          {user.map((rows,count) => (
              <tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700" key={count}>
                <th scope="row" className="px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap">
                  {rows.team_name}
                </th>
                <td className="px-6 py-4">
                  {rows.name_team_coach}
                </td>
                <td className="px-6 py-4">
                  {rows.training_institution_team}
                </td>
                <td className="px-6 py-4">
                  {rows.name_first_participant +', ' + rows.name_second_participant + ',  ' + rows.name_third_party}
                </td>
                <td className="px-6 py-4">
                  1
                </td>
              </tr>
          )
          )}
        </tbody>
      </table>
    </>
  );
};

export default LoadingTeamsForm;