// XAxis ticks — recharts-parity SVG partial (internal; PLAIN geometry
// threaded by the chart tags — see grid.marko's header note on why this
// can never take the live CartesianCtx). Tick <text> carries literal
// fill="#666" — the container's
// [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground restyles it.
// No axis line / tick lines: shadcn demos always pass tickLine={false}
// axisLine={false}, so we simply never render them. Any tickFormatter is
// applied by the CALLER before passing `ticks`.
import type { PlotGeometry, XTick } from "./math.ts";
import { xAxis as styles } from "./classes.ts";

export interface Input {
  plot: PlotGeometry;
  ticks: XTick[];
  tickMargin?: number;
}

<const/{ plot, ticks, tickMargin = 8 }=input/>
<const/tickY=(plot.y + plot.height + tickMargin)/>

<g class=styles.root>
  <g class=styles.ticks>
    <for|tick| of=ticks>
      <g class=styles.tick>
        <text
          stroke="none"
          fill="#666"
          class=styles.tickText
          x=tick.x
          y=tickY
          text-anchor="middle"
        ><tspan x=tick.x dy="0.71em">${tick.value}</tspan></text>
      </g>
    </for>
  </g>
</g>