import React, { useEffect, useState } from "react";
import { Team } from "../../components/interfaces/Team";
import { get } from "http";
import { fetchTeams } from "../api";
import { useNavigate } from "react-router-dom";



const Teams: React.FC = () => {
    const [teams, setTeams] = useState<Team[]>([]);
    const navigate = useNavigate();

    useEffect(() => {
        // Replace with API call in production
       load();
    }, []);

    async function load() 
    {
        try {
        const teams : Team[] = await fetchTeams(localStorage.getItem("token") || "");
        console.log("Geladene Teams:", teams);
        if (teams != null) 
            setTeams(teams);
        } catch (error) {
            console.error("Fehler beim Laden der Teams:", error);
        }
        finally {
        }
    }

    return (
        <div style={{ padding: "2rem" }}>
            <h1>Teams Administration</h1>
            <button onClick={() => navigate("/teams")
                }>Create Team</button>
            <table style={{ width: "100%", borderCollapse: "collapse", marginTop: "1rem" }}>
                <thead>
                    <tr>
                        <th style={{ borderBottom: "1px solid #ccc", textAlign: "left" }}>Team Name</th>
                       
                    </tr>
                </thead>
                <tbody>
                    {teams.map(team => (
                        <tr key={team.teamUUID}>
                            <td style={{ padding: "0.5rem 0" }}>{team.name}</td>
                           
                        </tr>
                    ))}
                </tbody>
            </table>
        </div>
    );
};

export default Teams;