"use client"

import * as React from "react"
import { cn } from "../../lib/utils"

export interface ListPageTreeColumnHeaderProps {
  title: string
  /** Right side (e.g. icon buttons) — keep touch targets ≥ 24px */
  trailing?: React.ReactNode
  className?: string
}

/**
 * Shared Miller / tree column header — pins under the hub views strip while
 * `[data-page-scroll]` owns vertical scroll (same job as DataTable thead).
 *
 * Requires split `ResizablePanelGroup` / `ResizablePanel` to use
 * `LIST_PAGE_SPLIT_RESIZABLE_GROUP_STYLE` + `LIST_PAGE_SPLIT_RESIZABLE_PANEL_STYLE`
 * so library `overflow` defaults do not trap sticky.
 */
export function ListPageTreeColumnHeader({
  title,
  trailing,
  className,
}: ListPageTreeColumnHeaderProps) {
  return (
    <div
      data-slot="list-page-tree-column-header"
      className={cn(
        // Views strip sticks at `top-0` with utility-bar height; pin below it.
        // Full panel width — do not use `self-start` (shrinks header + border).
        "sticky top-(--shell-utility-bar-height) z-30 isolate w-full shrink-0 border-b border-border bg-card px-3 py-2",
        className,
      )}
    >
      <div className="flex h-9 items-center justify-between gap-2">
        <h3 className="min-w-0 flex-1 truncate text-sm font-medium text-foreground">{title}</h3>
        {trailing ? (
          <div className="flex shrink-0 items-center gap-0.5">{trailing}</div>
        ) : null}
      </div>
    </div>
  )
}