"use client";

import { Leaderboard } from "@/components/leaderboard/leaderboard";
import type { LeaderboardEntry } from "@/types/leaderboard";
import { cn } from "@/lib/utils";

const reportsPanelClass =
  "bg-[rgba(255,255,255,0.45)] dark:bg-[rgba(244,246,255,0.4)] backdrop-blur-[15px] border border-white/60 rounded-[14px] p-6 shadow-[0px_2px_15px_0px_rgba(0,0,0,0.06)] hover:shadow-[0px_6px_25px_0px_rgba(108,99,255,0.1)] transition-all duration-300 hover:scale-[1.005]";

export type ReportsLeaderboardPanelProps = {
  entries?: LeaderboardEntry[];
  isLoading?: boolean;
  className?: string;
};

export function ReportsLeaderboardPanel({
  entries,
  isLoading,
  className,
}: ReportsLeaderboardPanelProps) {
  return (
    <div className={cn(reportsPanelClass, "h-full min-h-[280px]", className)}>
      <Leaderboard
        entries={entries}
        isLoading={isLoading}
        listClassName="max-h-[220px]"
      />
    </div>
  );
}