// Per-row thread visualisation. Threading visualization is a *pure
// function of `depth` alone* — no parent-child coordination, no central
// walker, no collapse. A row at depth N gets a 3px coloured stripe on
// its left edge plus a depth-proportional indent (capped so the avatar
// column doesn't get eaten on phone-sized screens). The stripe colour
// cycles modulo `THREAD_PALETTE.length`, so depth past the indent cap
// is still visually communicated.
//
// Reference: same paradigm as Reddit-colored-comments (modulo-cycled
// `border-left-color` across N levels), HN threadlines, and Discourse's
// experimental nested view.
//
// Tokens are declared on both light and dark theme blocks of
// tamagui.config.ts; `borderLeftColor` accepts theme tokens directly.

export const THREAD_PALETTE = [
  '$threadAccent1',
  '$threadAccent2',
  '$threadAccent3',
  '$threadAccent4',
] as const

export const INDENT_CAP = 4
export const INDENT_STEP = 10

export function threadRowStyle(depth: number) {
  if (depth <= 0) return {}
  return {
    borderLeftWidth: 3,
    borderLeftColor: THREAD_PALETTE[(depth - 1) % THREAD_PALETTE.length],
    paddingLeft: 15 + Math.min(depth, INDENT_CAP) * INDENT_STEP,
  }
}
