import { Archive, FileStack, Landmark, Sparkles, TimerReset, TriangleAlert, type LucideIcon } from "lucide-react";
import { Card, CardContent } from "@/components/ui/card";
import type { BitacoraDashboardStats } from "@/server/queries/bitacora";

export function BitacoraDashboard({ stats }: { stats: BitacoraDashboardStats }) {
  return (
    <section className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
      <SummaryCard icon={Archive} label="Total hitos" value={stats.totalHitos} />
      <SummaryCard icon={TimerReset} label="Hitos pendientes" value={stats.hitosPendientes} />
      <SummaryCard icon={TriangleAlert} label="Hitos críticos" value={stats.hitosCriticos} />
      <SummaryCard icon={FileStack} label="Archivos cargados" value={stats.archivosCargados} />
      <SummaryCard icon={Sparkles} label="Hitos finalizados" value={stats.hitosFinalizados} />
      <SummaryCard icon={Landmark} label="Organismos involucrados" value={stats.organismosInvolucrados} />
    </section>
  );
}

function SummaryCard({ icon: Icon, label, value }: { icon: LucideIcon; label: string; value: number }) {
  return (
    <Card className="border-border shadow-sm">
      <CardContent className="flex items-center gap-4 p-4">
        <div className="rounded-2xl border border-border bg-muted p-3 text-muted-foreground">
          <Icon className="h-5 w-5" />
        </div>
        <div>
          <p className="text-sm text-muted-foreground">{label}</p>
          <p className="text-2xl font-semibold text-foreground">{value}</p>
        </div>
      </CardContent>
    </Card>
  );
}