import * as React from "react"

import { cn } from "@/lib/utils"

/** Indent that hangs the tree trunk under the folder icon of a group header (px-4 + chevron + gap + half icon). */
export const TREE_LIST_CLASS = "mb-2 ml-[52px] pr-4"

/**
 * One node of a tree list: draws its branch connector (vertical trunk + elbow) beside a label row
 * whose vertical centre is 18px from the top (a 36px row).
 */
export function TreeItem({
  isLast,
  children,
  nested,
  className,
}: {
  isLast: boolean
  children: React.ReactNode
  /** Child list rendered under this node (use `<ul className="ml-2">`). */
  nested?: React.ReactNode
  className?: string
}) {
  return (
    <li className="relative pl-6">
      <span
        aria-hidden
        className={cn("absolute left-0 w-px bg-border", isLast ? "top-0 h-[18px]" : "inset-y-0")}
      />
      <span aria-hidden className="absolute top-[18px] left-0 h-px w-4 bg-border" />
      <div className={cn("flex min-h-9 items-center justify-between gap-3 py-0.5", className)}>
        {children}
      </div>
      {nested}
    </li>
  )
}