"use client"

import { DollarSign, Users, CalendarCheck, FileText } from "lucide-react"

import { OverviewCard } from "../components/overview-card"
import { getDashboard } from "@/lib/features/admin/dashboard/service";
import { useQuery } from "@tanstack/react-query"
import Loading from "@/app/(dashoard)/components/loading";
import { DashboardProps } from "@/lib/features/admin/dashboard/type";
import { DashboardHeader } from "@/app/(dashoard)/components/dashboard-header";

export default function DashboardPage() {

  //dashboard
  const { data, isLoading } = useQuery({
    queryKey: ["dashboard"],
    queryFn: () => getDashboard(),
  });


  if (isLoading) {
    return <Loading />;
  }


  //error
  // if(error){
  //   return <ErrorMessage error={error} fallback="Dashboard error" />
  // }

  // dashboard
  const dashboard: DashboardProps = data?.data || null;


  return (
    <div className="flex min-h-screen w-full flex-col bg-muted/40 ">
      <DashboardHeader />
      <main className="flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8">
        <div className="grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4">
          <OverviewCard
            title="Clubs"
            value="1,234"
            description=""
            icon={<FileText className="h-4 w-4 text-muted-foreground" />}
          />
          <OverviewCard
            title="Players"
            value={"" + dashboard?.students}
            description=""
            icon={<Users className="h-4 w-4 text-muted-foreground" />}
          />
          <OverviewCard
            title="Fixtures"
            value="15"
            description=""
            icon={<CalendarCheck className="h-4 w-4 text-muted-foreground" />}
          />
          <OverviewCard
            title="Goals"
            value={"" + dashboard?.payment}
            description=""
            icon={<DollarSign className="h-4 w-4 text-muted-foreground" />}
          />

        </div>

        <div className="grid gap-4 md:gap-8 lg:grid-cols-2 xl:grid-cols-3">

        </div>
      </main>
    </div>
  )
}
