import { tr } from 'date-fns/locale';
import React from 'react';

type UserProps = {
  team_name: string;
  name_team_coach: string;
  training_institution_team: string;
  name_first_participant: string;
  name_second_participant: string;
  name_third_party: string;
  classTeam: string[];
};

export const LoadingTeamsForm : React.FC<UserProps> = ({
  team_name,
  name_team_coach,
  training_institution_team,
  name_first_participant,
  name_second_participant,
  name_third_party,
  classTeam
}) => {


  const flatten = (arr) => {
    const arrOfNum = [];
    arr.split(',').forEach(str => {
      arrOfNum.push(Number(str));
    });
    return Math.min(...arrOfNum);
  }

  return (
        <tbody>
            <tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
              <th scope="row" className="px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap">
                {team_name}
              </th>
              <td className="px-6 py-4">
                {name_team_coach}
              </td>
              <td className="px-6 py-4">
                {training_institution_team}
              </td>
              <td className="px-6 py-4">
                {name_first_participant +', ' + name_second_participant + ',  ' + name_third_party}
              </td>
              <td className="px-6 py-4">
                { flatten(classTeam)}
              </td>
            </tr>
        </tbody>
  );
};

export default LoadingTeamsForm;
