import { 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() {
  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>
  );
}