tvone/components/CategoryTree.tsx

// "use client";

// import React, { useState } from "react";
// import {
//   FolderTree,
//   Edit3,
//   Trash2,
//   Plus,
//   ChevronRight,
//   ChevronDown,
// } from "lucide-react";
// import { Category } from "@/lib/categories.api";

// export function CategoryTree({
//   nodes,
//   onEdit,
//   onDelete,
//   onAddChild,
// }: {
//   nodes: Category[];
//   onEdit: (c: Category) => void;
//   onDelete: (id: string) => void;
//   onAddChild: (parentId: string) => void;
// }) {
//   return (
//     <div>
//       {nodes.map((node) => (
//         <TreeNode
//           key={node.id}
//           node={node}
//           onEdit={onEdit}
//           onDelete={onDelete}
//           onAddChild={onAddChild}
//         />
//       ))}
//     </div>
//   );
// }

// function TreeNode({
//   node,
//   onEdit,
//   onDelete,
//   onAddChild,
// }: {
//   node: Category;
//   onEdit: (c: Category) => void;
//   onDelete: (id: string) => void;
//   onAddChild: (parentId: string) => void;
// }) {
//   const [open, setOpen] = useState(true);

//   return (
//     <div className="ml-2 border-l pl-3">

//       {/* NODE ROW */}
//       <div className="flex items-center justify-between py-2 group">

//         <div className="flex items-center gap-2">
          
//           <button onClick={() => setOpen(!open)}>
//             {open ? (
//               <ChevronDown size={14} />
//             ) : (
//               <ChevronRight size={14} />
//             )}
//           </button>

//           <FolderTree size={14} className="text-blue-500" />

//           {/* INLINE EDIT TRIGGER */}
//           <span
//             onClick={() => onEdit(node)}
//             className="text-sm font-medium cursor-pointer hover:text-blue-600"
//           >
//             {node.name}
//           </span>
//         </div>

//         {/* ACTIONS (SHOW ON HOVER) */}
//         <div className="flex gap-2 opacity-0 group-hover:opacity-100 transition">

//           <button
//             onClick={() => onAddChild(node.id)}
//             className="text-green-600"
//           >
//             <Plus size={14} />
//           </button>

//           <button onClick={() => onEdit(node)}>
//             <Edit3 size={14} />
//           </button>

//           <button onClick={() => onDelete(node.id)}>
//             <Trash2 size={14} className="text-red-500" />
//           </button>
//         </div>
//       </div>

//       {/* CHILDREN */}
//       {open && node.children?.length ? (
//         <div>
//           {node.children.map((child) => (
//             <TreeNode
//               key={child.id}
//               node={child}
//               onEdit={onEdit}
//               onDelete={onDelete}
//               onAddChild={onAddChild}
//             />
//           ))}
//         </div>
//       ) : null}
//     </div>
//   );
// }