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

export function MetadataPanel({ note }: { note: NoteDetail }) {
  return (
    <section className="surface-card" style={{ padding: "var(--ml-space-5)", display: "grid", gap: "var(--ml-space-3)" }}>
      <div style={{ fontWeight: 700 }}>Metadata</div>
      <div style={{ display: "grid", gap: "var(--ml-space-2)" }}>
        <div style={{ color: "var(--ml-text-secondary)" }}>Owner: {note.metadata.owner}</div>
        <div style={{ color: "var(--ml-text-secondary)" }}>Source: {note.metadata.source}</div>
        <div style={{ color: "var(--ml-text-secondary)" }}>Review state: {note.metadata.reviewState}</div>
        <div style={{ color: "var(--ml-text-secondary)" }}>Tasks: {note.metadata.taskCount}</div>
        <div style={{ color: "var(--ml-text-secondary)" }}>Artifacts: {note.metadata.artifactCount}</div>
      </div>
      <div style={{ display: "flex", gap: "var(--ml-space-2)", flexWrap: "wrap" }}>
        {note.tags.map((tag) => (
          <span key={tag} className="badge">#{tag}</span>
        ))}
      </div>
    </section>
  );
}
