import { Head, Link } from '@inertiajs/react';
import { Crown, Medal, Trophy, ArrowLeft, ArrowUpRight, Zap, Target } from 'lucide-react';
import AppLayout from '@/layouts/app-layout';
import type { BreadcrumbItem } from '@/types';
import { cn } from '@/lib/utils';
type Entry = {
rank: number;
id: number;
name: string;
points: number;
avatar: string | null;
isMe: boolean;
};
type Props = {
top: Entry[];
myRank: number;
myPoints: number;
};
const breadcrumbs: BreadcrumbItem[] = [{ title: 'Leaderboard', href: '/leaderboard' }];
function Avatar({ name, avatar, size = '10' }: { name: string; avatar: string | null; size?: string }) {
const sizeClasses = {
'10': 'h-10 w-10 text-sm',
'12': 'h-12 w-12 text-base',
'16': 'h-16 w-16 text-xl',
}[size] || 'h-10 w-10 text-sm';
if (avatar) {
return 
;
}
return (
{name[0].toUpperCase()}
);
}
export default function LeaderboardIndex({ top, myRank, myPoints }: Props) {
const rank1 = top.find((e) => e.rank === 1);
const rank2 = top.find((e) => e.rank === 2);
const rank3 = top.find((e) => e.rank === 3);
const remaining = top.filter((e) => e.rank > 3);
return (
<>