"use client";

import { useHistory } from "@/features/dashboard/hooks/useHistory";

export function HistoryList() {
  const { data, isLoading, isError } = useHistory();

  if (isLoading) {
    return <p>Loading recent activity…</p>;
  }

  if (isError || !data) {
    return <p>Unable to load history.</p>;
  }

  return (
    <section style={{ display: "grid", gap: 16 }}>
      <h2>Recent generations</h2>
      <ul style={{ display: "grid", gap: 12 }}>
        {data.map((item) => (
          <li key={item.id} style={{ border: "1px solid rgba(0,0,0,0.08)", borderRadius: 12, padding: 16, textAlign: "left" }}>
            <div style={{ display: "flex", justifyContent: "space-between" }}>
              <strong>{item.type.toUpperCase()}</strong>
              <span>{new Date(item.createdAt).toLocaleString()}</span>
            </div>
            <p style={{ margin: "4px 0", color: "var(--muted)" }}>{item.prompt}</p>
            <span>Status: {item.status}</span>
          </li>
        ))}
      </ul>
    </section>
  );
}
