package main

// techSpecComponent renders the tech-spec table with right-aligned mono numerals
// and hairline row rules.
templ techSpecComponent(data TechSpecData) {
	<section data-block="scifi-clean:tech_spec" class="py-8">
		<div class="max-w-3xl mx-auto px-4">
			if data.Caption != "" {
				<p class="scifi-mono text-xs uppercase tracking-widest text-muted-foreground mb-3">
					{ data.Caption }
				</p>
			}
			<table class="w-full text-sm hairline">
				<tbody>
					if len(data.Rows) == 0 {
						<tr class="hairline-b">
							<td class="scifi-body py-3 px-4 text-foreground">No spec rows yet.</td>
							<td class="scifi-mono py-3 px-4 text-right tabular-nums text-muted-foreground">--</td>
							<td class="scifi-mono py-3 pr-4 text-right text-muted-foreground"></td>
						</tr>
					} else {
						for i, row := range data.Rows {
							@techSpecRow(row, i == len(data.Rows)-1)
						}
					}
				</tbody>
			</table>
		</div>
	</section>
}

// techSpecRow renders a single row. Last-row check controls whether to drop
// the bottom hairline.
templ techSpecRow(row TechSpecRow, last bool) {
	<tr class={ rowBorderClass(last) }>
		<td class="scifi-body py-3 px-4 text-muted-foreground uppercase text-xs tracking-wider">
			{ row.Label }
		</td>
		<td class="scifi-mono py-3 px-4 text-right tabular-nums text-foreground font-medium" style="font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right;">
			{ row.Value }
		</td>
		<td class="scifi-mono py-3 pr-4 text-right text-muted-foreground text-xs" style="font-family: var(--font-mono); text-align: right;">
			{ row.Unit }
		</td>
	</tr>
}

func rowBorderClass(last bool) string {
	if last {
		return ""
	}
	return "hairline-b"
}