import { useEffect, useState } from 'react';
import { fetchTournaments } from './api';
import { Link } from 'react-router-dom';

interface Tournament {
  id: string;
  name: string;
  location: string;
  teams: { id: string; name: string }[];
  maxParticipants: number;
}

export default function Dashboard() {
  const [tournaments, setTournaments] = useState<Tournament[]>([]);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    fetchTournaments()
      .then(setTournaments)
      .catch(() => setError('Fehler beim Laden der Turniere'));
  }, []);

  return (
    <div className="p-6 max-w-5xl mx-auto">
      
      <h1 className="text-3xl font-bold mb-6">Turniere</h1>
      {error && <p className="text-red-600">{error}</p>}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        {tournaments.map(t => (
          <div key={t.id} className="border rounded p-4 shadow hover:shadow-lg transition cursor-pointer">
            <Link to={`/tournament/${t.id}`}>
              <h2 className="text-xl font-semibold">{t.name}</h2>
              <p>{t.teams.length} / {t.maxParticipants} Teilnehmer</p>
              <p>Ort: {t.location}</p>
            </Link>
          </div>
        ))}
      </div>
    </div>
  );
}
