"use client";

import { StatusCard } from "@/components/StatusCard";
import { SessionCard } from "@/components/SessionCard";
import { MemorySnapshotCard } from "@/components/MemorySnapshotCard";
import { useSessions } from "@/lib/hooks";

export default function PulsePage() {
  const { data: sessionsData, isLoading } = useSessions(8);

  return (
    <div className="space-y-4">
      <h1 className="text-xl font-bold" style={{ color: "#f59e0b" }}>
        Pulse
      </h1>

      <StatusCard />
      <MemorySnapshotCard />

      <div>
        <h2 className="text-sm font-medium text-zinc-400 mb-2">
          Recent Sessions
        </h2>
        {isLoading ? (
          <div className="space-y-3">
            {[...Array(3)].map((_, i) => (
              <div key={i} className="glass p-4 animate-pulse">
                <div className="h-4 bg-white/[0.06] rounded w-3/4 mb-2" />
                <div className="h-3 bg-white/[0.06] rounded w-1/2" />
              </div>
            ))}
          </div>
        ) : (
          <div className="space-y-2">
            {sessionsData?.items?.map((s) => (
              <SessionCard key={s.id} session={s} />
            ))}
            {sessionsData?.items?.length === 0 && (
              <div className="glass p-6 text-center text-sm text-zinc-500">
                No sessions yet
              </div>
            )}
          </div>
        )}
      </div>
    </div>
  );
}