import TerminalBox from "./components/TerminalBox";
import { getRouteTree, RouteNode } from "../lib/routeTree";

export default function Home() {
  const routes = getRouteTree();

  function renderTree(nodes: RouteNode[], depth = 0) {
    return nodes.map((node, i) => (
      <div key={node.path}>
        <div style={{ marginLeft: depth * 16 }}>
          <a href={node.path} className="text-zinc-300 hover:underline">
            {depth === 0 ? "├── " : "│   ".repeat(depth) + "└── "} 
            {node.name}
          </a>
        </div>
        {node.children && renderTree(node.children, depth + 1)}
      </div>
    ));
  }

  return (
    <div className="flex min-h-screen items-center justify-center p-10">
      <TerminalBox>
          {renderTree(routes)}
      </TerminalBox>
    </div>
  );
}