<script setup lang="ts">
// 16 leaves: alternating Type A / B, rotating 22.5° apart around (340,180)
const leaves = Array.from({ length: 16 }, (_, i) => {
  const angle = i * 22.5
  const isB = i % 2 === 1
  return isB
    ? {
        path: 'M340,72 C350,80 352,97 343,113 C339,108 332,94 335,77 Z',
        line: { x1: 340, y1: 75, x2: 343, y2: 111 },
        transform: `rotate(${angle},340,180)`,
      }
    : {
        path: 'M340,70 C350,78 352,96 343,112 C339,107 332,93 335,76 Z',
        line: { x1: 340, y1: 73, x2: 343, y2: 110 },
        transform: `rotate(${angle},340,180)`,
      }
})

withDefaults(
  defineProps<{
    size?: number
    color?: string
    spinning?: boolean
  }>(),
  {
    size: 48,
    spinning: true,
  },
)
</script>

<template>
  <svg
    class="nych-loading-icon"
    preserveAspectRatio="xMidYMid meet"
    viewBox="226 66 228 228"
    :width="size"
    :height="size"
    role="img"
    aria-label="loading"
    :style="{ color }"
  >
    <g class="wreath" fill="currentColor" stroke="currentColor" :style="spinning ? undefined : { animation: 'none' }">
      <g v-for="(leaf, i) in leaves" :key="i" :transform="leaf.transform">
        <path :d="leaf.path" />
        <line
          :x1="leaf.line.x1"
          :y1="leaf.line.y1"
          :x2="leaf.line.x2"
          :y2="leaf.line.y2"
          stroke-width="0.8"
          stroke-linecap="round"
        />
      </g>
    </g>
  </svg>
</template>
