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

export function PaymentsStatsGrid() {
  const t = useTranslations()
  const { data: revenueStats, isLoading: revenueLoading } = useGetRevenueStats()
  const { data: appointmentStats, isLoading: appointmentLoading } = useGetAppointmentStats()

  return (
    <div className="w-full grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
      <StatsCard
        label={t("earnings.stats.totalEarningToday")}
        value={revenueLoading ? "..." : `€${revenueStats?.todayRevenue || 0}`}
        valueColor="text-gradient-start"
        borderColor="border-gradient-start"
        iconBgColor="bg-light-blue"
        icon={<Euro className="w-7 h-7 text-gradient-start" />}
      />

      <StatsCard
        label={t("earnings.stats.totalRevenue")}
        value={revenueLoading ? "..." : `€${revenueStats?.totalRevenue || 0}`}
        valueColor="text-green-500 font-bold"
        borderColor="border-green-500"
        iconBgColor="bg-green-100"
        icon={<TrendingUp className="w-7 h-7 text-green-500" />}
      />

      <StatsCard
        label={t("earnings.stats.appointments")}
        value={appointmentLoading ? "..." : `${appointmentStats?.totalAppointments || 0}`}
        valueColor="text-[#EFB603]"
        borderColor="border-[#EFB603]"
        iconBgColor="bg-[#FFF7D6]"
        icon={<Calendar className="w-7 h-7 text-[#EFB603]" />}
      />
    </div>
  )
}