import Link from "next/link";
"use client";
import useSWR from "swr";

const fetcher = (url: string) => fetch(url).then((r) => r.json());

export default function RankingPage({ searchParams }: { searchParams?: { period?: string } }) {
  const period = searchParams?.period ?? "monthly";
  const { data } = useSWR<{ period: string; items: { userId: string; nickname: string; points: number }[] }>(`/api/ranking?period=${period}`, fetcher);
  return (
    <div>
      <h1>회원랭킹</h1>
      <div style={{ display: "flex", gap: 8, margin: "8px 0" }}>
        <Link href={`/ranking?period=daily`}>일간</Link>
        <Link href={`/ranking?period=weekly`}>주간</Link>
        <Link href={`/ranking?period=monthly`}>월간</Link>
        <Link href={`/ranking?period=all`}>전체</Link>
      </div>
      <ol>
        {(data?.items ?? []).map((i) => (
          <li key={i.userId}>
            <strong>{i.nickname}</strong> — {i.points}점
          </li>
        ))}
      </ol>
    </div>
  );
}


