"use client"
import StatsCard from "@/components/common/StatsCard"
import { Euro, Calendar, UserPlus, Star } from "lucide-react"
import { useGetRevenueStats, useGetAppointmentStats, useGetClientsStats } from "@/lib/react-query/hooks/analytics"
import { useTranslations } from "next-intl"

function AnalyticsStatsGrid() {
  const { data: revenueStats, isLoading: revenueLoading } = useGetRevenueStats()
  const { data: appointmentStats, isLoading: appointmentLoading } = useGetAppointmentStats()
  const { data: clientStats, isLoading: clientLoading } = useGetClientsStats()
  const t = useTranslations()

  return (
    <div className="w-full grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
      <StatsCard
        label={t("analytics.stats.totalRevenue")}
        value={revenueLoading ? "..." : `€${revenueStats?.totalRevenue || 0}`}
        valueColor="text-blue-900/90 font-bold"
        borderColor="border-blue-900/90 "
        iconBgColor="bg-blue-100"
        icon={<Euro className="w-7 h-7 text-blue-900/90" />}
      />
      <StatsCard
        label={t("analytics.stats.totalBookings")}
        value={appointmentLoading ? "..." : `${appointmentStats?.totalAppointments || 0}`}
        valueColor="text-green-600 font-bold"
        borderColor="border-green-600"
        iconBgColor="bg-green-100"
        icon={<Calendar className="w-7 h-7 text-green-600" />}
      />
      <StatsCard
        label={t("analytics.stats.newCustomers")}
        value={clientLoading ? "..." : `${clientStats?.newClientsToday || 0}`}
        valueColor="text-orange-600 font-bold"
        borderColor="border-orange-600"
        iconBgColor="bg-orange-100"
        icon={<UserPlus className="w-7 h-7 text-orange-600" />}
      />
      {/* <StatsCard
        label={t("analytics.stats.avgRating")}
        value="4.8"
        valueColor="text-yellow-500 font-bold"
        borderColor="border-yellow-500"
        iconBgColor="bg-yellow-100"
        icon={<Star className="w-7 h-7 text-yellow-500" />}
      /> */}
    </div>
  )
}

export default AnalyticsStatsGrid