---
/**
 * 热力图网格（可复用渲染件）：给 5 个动效方案预览共用，避免把 371 个格子抄五遍。
 *
 * 每格带 `data-c/--c`（列=周）与 `data-r/--r`（行=星期），动效方案靠这两个自定义属性
 * 算错峰延迟；`data-l` 是灰阶档（0–4，复用 tokens 的 --ink-1..4）。
 * 全部格子 aria-hidden：语义由外层 role="img" + aria-label 概括（371 个 aria 节点是噪音）。
 */
import { levelOf, type HeatDay } from '../../lib/heatmap';

interface Props {
  weeks: HeatDay[][];
  /** 网格类型，仅用于选择器命名（不动行为） */
  variant: string;
  /** 单元格错峰延迟基数（ms），0 = 不设延迟 */
  step?: number;
}

const { weeks, variant, step = 0 } = Astro.props;
---

<div class={`hg hg-${variant}`} data-hg={variant}>
  {weeks.map((week, ci) =>
    week.map((day, ri) => (
      <span
        class={`hg-c hg-l${levelOf(day.count)}`}
        data-c={ci}
        data-r={ri}
        data-count={day.count}
        data-date={day.date}
        style={step ? `--c:${ci};--r:${ri};--d:${(ci + ri) * step}ms` : `--c:${ci};--r:${ri}`}
        aria-hidden="true"
      />
    )),
  )}
</div>

<style>
  .hg {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(7, 10px);
    grid-auto-columns: 10px;
    gap: 3px;
  }
  .hg-c {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    /* 与线上热力图同口径：空格用 hairline 描边、四档用 ink 灰阶（亮暗自动跟随），
       accent 只留给各方案的"高亮"（glow / flow / 连续数字），不参与数据编码 */
  }
  .hg-l0 { border: 1px solid var(--line); }
  .hg-l1 { background: var(--ink-4); }
  .hg-l2 { background: var(--ink-3); }
  .hg-l3 { background: var(--ink-2); }
  .hg-l4 { background: var(--ink-1); }
</style>