import { DataTable } from "./data-table";
import { getSongsWithTitles } from "@/lib/api";
import { Song, columns } from "./colums";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

const ChunithmData = async () => {
  const songs: Song[] = await getSongsWithTitles(10000);

  return (
    <div className="p-10">
      <div className="space-y-1 pb-4">
        <Tabs defaultValue="playlog">
          <TabsList>
            <TabsTrigger value="playlog">Playlog</TabsTrigger>
            <TabsTrigger value="gambling">Gamble</TabsTrigger>
            <TabsTrigger value="character">Customization</TabsTrigger>
          </TabsList>
          <TabsContent value="playlog">
            <DataTable columns={columns} data={songs} />
          </TabsContent>
          <TabsContent value="character">
            Change your password here.
          </TabsContent>
        </Tabs>
      </div>
      <div></div>
    </div>
  );
};

export default ChunithmData;