"use client";

import { useMetrics } from "@/hooks/useMetrics";
import { MetricCard } from "@/components/ui/metric-card";
import { Users, UserCheck, Shield, Coins, MessageSquare, FileText } from "lucide-react";

export function OverviewMetrics() {
  const { metrics, loading, error } = useMetrics();

  if (loading) {
    return (
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
        {Array.from({ length: 6 }).map((_, i) => (
          <div key={i} className="h-32 bg-muted animate-pulse rounded-lg" />
        ))}
      </div>
    );
  }

  if (error || !metrics) {
    return (
      <div className="text-center py-8 text-muted-foreground">
        Erreur lors du chargement des métriques
      </div>
    );
  }

  return (
    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
      <MetricCard
        title="Utilisateurs totaux"
        value={metrics.totalUsers}
        icon={Users}
      />
      <MetricCard
        title="Utilisateurs actifs"
        value={metrics.activeUsers}
        icon={UserCheck}
      />
      <MetricCard
        title="Administrateurs"
        value={metrics.totalAdmins}
        icon={Shield}
      />
      <MetricCard
        title="Crédits totaux"
        value={metrics.totalCredits}
        icon={Coins}
      />
      <MetricCard
        title="Conversations actives"
        value={metrics.activeConversations}
        icon={MessageSquare}
      />
      <MetricCard
        title="Messages totaux"
        value={metrics.totalMessages}
        icon={FileText}
      />
    </div>
  );
}