"use client";

import { useRouter } from "next/navigation";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";

export function LeaderboardTabs({
  active,
  searchQuery,
}: {
  active: "xp" | "vc";
  searchQuery: string;
}) {
  const router = useRouter();

  return (
    <Tabs
      value={active}
      onValueChange={(value) => {
        const params = new URLSearchParams();
        if (searchQuery) params.set("q", searchQuery);
        const query = params.toString();
        router.push(query ? `/leaderboard/${value}?${query}` : `/leaderboard/${value}`);
      }}
    >
      <TabsList className="w-full sm:w-fit" aria-label="เลือกประเภทลีดเดอร์บอร์ด">
        <TabsTrigger value="xp">อันดับ XP</TabsTrigger>
        <TabsTrigger value="vc">เวลาในห้องเสียง</TabsTrigger>
      </TabsList>
    </Tabs>
  );
}