import { InProgressMatches } from "../components/InProgressMatches";
import { Leaderboard } from "../components/Leaderboard";
import { ProfileStatsCard } from "../components/ProfileStatsCard";
import { Spinner } from "../components/Spinner";
import { useHome } from "../hooks/stats";

export function HomePage() {
  const { data, isLoading, isError } = useHome();

  if (isLoading) return <Spinner />;
  if (isError || !data) return <div className="muted">Не удалось загрузить данные.</div>;

  return (
    <div>
      <div className="card">
        <h3>Топ игроков</h3>
        <Leaderboard entries={data.leaderboard} provisional={data.provisional} />
      </div>

      <ProfileStatsCard stats={data.profile} />

      <InProgressMatches items={data.in_progress} />

      {data.active_group && (
        <div className="card">
          <h3>Активная группа</h3>
          <div className="row-between">
            <b>{data.active_group.name}</b>
            <span className="muted small">
              игр: {data.active_group.games}, побед: {data.active_group.wins}
            </span>
          </div>
        </div>
      )}
    </div>
  );
}