import Link from "next/link";
import type { LinkedNote } from "@/lib/types";

export function LinkedNotesPanel({ linkedNotes }: { linkedNotes: LinkedNote[] }) {
  return (
    <section className="surface-card" style={{ padding: "var(--nl-space-5)", display: "grid", gap: "var(--nl-space-3)" }}>
      <div style={{ fontWeight: 700 }}>Linked notes</div>
      {linkedNotes.map((linkedNote) => (
        <Link key={linkedNote.id} href={`/notes/${linkedNote.id}`} className="surface-muted" style={{ padding: "var(--nl-space-3)", display: "grid", gap: 4 }}>
          <strong>{linkedNote.title}</strong>
          <span style={{ color: "var(--nl-text-secondary)" }}>{linkedNote.relationship}</span>
        </Link>
      ))}
    </section>
  );
}