import { useEffect, useState } from "react"
import { Table } from "../common/table"
import { SortingState } from "@tanstack/react-table"
import { scoresCol } from "../../utility/score"
import { useQuery } from "@tanstack/react-query"
import { getScoresList } from "../../services/api/score"

export const Score = () => {
    const [sorting, setSorting] = useState<SortingState>([])
    const { data, isLoading } = useQuery({
        queryKey: ["score-list"],
        queryFn: getScoresList
    })

    useEffect(() => {
        console.log("data =>", data)
    }, [data])

    if (isLoading) return <p>LOADING ...</p>

    return (
        <Table sorting={sorting} setSorting={setSorting} columns={scoresCol} data={data?.data} tableStatus={data?.score} />
    )
}