import type { ReactElement } from "react";
import type { Metadata } from "next";
import { MindmapViewer } from "@/components/mindmap";

export const metadata: Metadata = {
  title: "Mindmap | Mosaic",
  description: "Knowledge graph visualization",
};

/**
 * Mindmap page - Interactive knowledge graph visualization
 *
 * Displays an interactive mindmap/knowledge graph using ReactFlow,
 * with support for multiple node types (concepts, tasks, ideas, projects)
 * and relationship visualization.
 */
export default function MindmapPage(): ReactElement {
  return (
    <div className="flex flex-col h-screen">
      <header className="border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-6 py-4">
        <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">Knowledge Graph</h1>
        <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
          Explore and manage your knowledge network
        </p>
      </header>

      <main className="flex-1 overflow-hidden">
        <MindmapViewer />
      </main>
    </div>
  );
}
