import type { ArtifactSummary } from "@/lib/types";

export function ArtifactPanel({ artifacts }: { artifacts: ArtifactSummary[] }) {
  return (
    <section className="surface-card" style={{ padding: "var(--ml-space-5)", display: "grid", gap: "var(--ml-space-3)" }}>
      <div style={{ display: "flex", justifyContent: "space-between", gap: "var(--ml-space-3)", alignItems: "center" }}>
        <div style={{ fontWeight: 700 }}>Artifacts</div>
        <span className="badge">upload deferred</span>
      </div>
      {artifacts.map((artifact) => (
        <div key={artifact.id} className="surface-muted" style={{ padding: "var(--ml-space-3)", display: "flex", justifyContent: "space-between", gap: "var(--ml-space-3)", alignItems: "center" }}>
          <div style={{ display: "grid", gap: 4 }}>
            <strong>{artifact.name}</strong>
            <span style={{ color: "var(--ml-text-secondary)" }}>{artifact.type}</span>
          </div>
          <span style={{ color: "var(--ml-text-secondary)" }}>{artifact.status}</span>
        </div>
      ))}
    </section>
  );
}