import { useQuery } from "@tanstack/react-query";
import { supabase } from "@/integrations/supabase/client";

export function AuditLogs() {
  const { data } = useQuery({
    queryKey: ["audit-logs"],
    queryFn: async () => {
      const { data, error } = await supabase
        .from("audit_logs")
        .select("*")
        .order("created_at", { ascending: false })
        .limit(100);
      if (error) throw error;
      return data;
    },
  });

  return (
    <div className="mt-4 space-y-2">
      {data?.map((log) => (
        <article key={log.id} className="rounded-2xl border border-border/60 bg-card p-3 text-xs shadow-card">
          <p className="font-semibold">{log.action}</p>
          <p className="mt-0.5 text-muted-foreground">
            {log.entity ?? "—"} • {new Date(log.created_at).toLocaleString()}
          </p>
        </article>
      ))}
      {!data?.length ? <p className="text-sm text-muted-foreground">No activity recorded yet.</p> : null}
    </div>
  );
}