import { useQuery } from "@tanstack/react-query"
import { AwardNotComplete } from "./award-not-complete"
import { getAwardsList } from "../../services/api/awards"
import { useEffect } from "react"
import { AwardsResponse } from "../../types"

export const Awards = () => {
    const { data, isLoading } = useQuery({
        queryKey: ["awards"],
        queryFn: getAwardsList
    })

    useEffect(() => { console.log("data =>", data?.data) }, [data])
    if (isLoading) return <p>LOADING...</p>
    return (
        <div className="flex flex-col gap-10">
            <div className="flex flex-row justify-between items-center">
                <p className="font-medium text-xl text-primary-text-color">جوایز (5)</p>
                <p className="font-normal text-base text-primary-text-color">امتیازهای من: 65</p>
            </div>
            <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-6">
                {data?.data?.map((award: AwardsResponse) => <AwardNotComplete key={award.id} award={award} />)}
            </div>
        </div>
    )
}