<script setup lang="ts">
// Icône d'une grille : les blocs dessinés dans le format de page A3 paysage,
// générés depuis la même définition adaptative que le rendu (useGrids) —
// l'icône reflète le nombre d'images réellement posées et leur orientation.
import type { ImageOrientation } from '~~/composables/useGrids'

const props = withDefaults(
  defineProps<{ grid: string; count?: number; orientation?: ImageOrientation; size?: number }>(),
  { count: 3, orientation: 'mixed', size: 64 },
)

// Page 42 × 29.7 (A3/10), marges/gouttières proportionnelles au gabarit
const W = 42
const H = 29.7
const M = 0.8 // 8 mm
const rects = computed(() => {
  const def = gridDef(props.grid, props.count, props.orientation)
  const iw = W - 2 * M
  const ih = H - 2 * M
  // gouttière 3,8 mm → fractions de la largeur et de la hauteur utiles
  return gridCellRects(def, 0.38 / iw, 0.38 / ih).map(r => ({
    x: M + r.x * iw,
    y: M + r.y * ih,
    w: r.w * iw,
    h: r.h * ih,
  }))
})
</script>

<template>
  <svg :width="size" :height="(size * H) / W" :viewBox="`0 0 ${W} ${H}`" aria-hidden="true">
    <rect :width="W" :height="H" fill="none" stroke="currentColor" stroke-width="0.6" opacity="0.35" />
    <rect
      v-for="(r, i) in rects"
      :key="i"
      :x="r.x"
      :y="r.y"
      :width="r.w"
      :height="r.h"
      fill="currentColor"
      opacity="0.75"
    />
  </svg>
</template>
