"use server";

import React from "react";
import { getAllAvatarParts } from "@/lib/api";
import { AvatarCustomization } from "@/components/avatarcustomization/page";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import ChunithmScorePlaylog from "@/components/scoreplaylog/page";

const getAvatarParts = async () => {
  console.log("Executed on the server side");

  const avatarParts = await getAllAvatarParts();
  return { avatarParts };
};

const Page = async () => {
  console.log("Executed on the server side");
  const avatarPartsData = await getAvatarParts();

  return (
    <div className="p-10">
      <Tabs defaultValue="scores">
        <TabsList>
          <TabsTrigger value="scores">Scores</TabsTrigger>
          <TabsTrigger value="customize">Customize</TabsTrigger>
        </TabsList>
        <TabsContent value="scores">
          <ChunithmScorePlaylog />
        </TabsContent>
        <TabsContent value="customize">
          <div className="p-10">
            <AvatarCustomization avatarSelectionData={avatarPartsData} />
          </div>
        </TabsContent>
      </Tabs>
    </div>
  );
};

export default Page;