'use client';

import { useTournament } from '@/hooks/useTournament';
import TournamentDisplay from '@/components/TournamentDisplay';

export default function LivePage() {
  const { tournament, loading } = useTournament(1000);

  if (loading) {
    return (
      <div className="min-h-screen felt-bg flex items-center justify-center">
        <span className="text-poker-gold text-2xl animate-pulse">Loading...</span>
      </div>
    );
  }

  if (!tournament) {
    return (
      <div className="min-h-screen felt-bg flex flex-col items-center justify-center gap-4 p-8">
        <div className="text-6xl">♠️</div>
        <h1 className="text-3xl font-display font-bold text-poker-gold">PokerForge TD</h1>
        <p className="text-white/60 text-lg">No tournament in progress</p>
      </div>
    );
  }

  return (
    <div className="min-h-screen felt-bg p-4 md:p-8">
      <div className="max-w-5xl mx-auto">
        <TournamentDisplay tournament={tournament} />
      </div>

      {/* View-only footer - no buttons */}
      <div className="fixed bottom-0 left-0 right-0 bg-black/40 backdrop-blur-sm py-2 text-center text-xs text-white/40">
        PokerForge TD · Live View · {new Date().toLocaleTimeString()}
      </div>
    </div>
  );
}