import Link from "next/link";
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>
        <Link href="/reviews" style={{ color: "var(--ml-text-secondary)" }}>
          Review state: {note.metadata.reviewState}
        </Link>
        <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) => (
          <Link key={tag} href={`/search?q=${encodeURIComponent(tag)}`} className="badge">
            #{tag}
          </Link>
        ))}
      </div>
    </section>
  );
}