"use client";

import { useState } from "react";
import type { FlappyStats } from "@/app/(frontend)/flappy/actions";
import { FlappyBird } from "./FlappyBird";
import { FlappyLeaderboard } from "./FlappyLeaderboard";

export function FlappyArena({
  initialStats,
  currentUserId,
}: {
  initialStats: FlappyStats;
  currentUserId: number | string;
}) {
  const [refreshKey, setRefreshKey] = useState(0);

  return (
    <div className="flex flex-col items-center gap-6">
      <FlappyBird initialStats={initialStats} onGameRecorded={() => setRefreshKey((k) => k + 1)} />
      <FlappyLeaderboard refreshKey={refreshKey} currentUserId={currentUserId} />
    </div>
  );
}