"use client";

import { Card } from "@/components/ui/card";
import { Leaderboard } from "@/components/leaderboard/leaderboard";
import type { LeaderboardEntry } from "@/types/leaderboard";
import { useDashboardLeaderboardQuery } from "@/features/dashboard/hooks/use-dashboard-section-queries";
import { isDashboardSectionLoading } from "@/features/dashboard/hooks/dashboard-query-status";

export type LeaderboardCardProps = {
  leaderboard?: LeaderboardEntry[];
  isLoading?: boolean;
};

export function LeaderboardCard({
  leaderboard: leaderboardProp,
  isLoading: isLoadingProp,
}: LeaderboardCardProps = {}) {
  const { data, isPending, isFetching } = useDashboardLeaderboardQuery({
    enabled: leaderboardProp === undefined,
  });
  const leaderboard = leaderboardProp ?? data;
  const loading =
    isLoadingProp ??
    isDashboardSectionLoading(isPending, isFetching, leaderboard);

  if (loading) {
    return (
      <Card className="flex h-full flex-col gap-0 overflow-hidden p-5">
        <Leaderboard isLoading />
      </Card>
    );
  }

  return (
    <Card className="flex h-full flex-col gap-0 overflow-hidden p-5">
      <Leaderboard entries={leaderboard} />
    </Card>
  );
}