<script setup>
defineProps({
  name: { type: String, default: 'chart' },
  size: { type: Number, default: 44 }
})
</script>

<template>
  <svg class="icon-mark" :width="size" :height="size" viewBox="0 0 48 48" fill="none" aria-hidden="true">
    <template v-if="name === 'user-flow'">
      <circle cx="24" cy="16" r="7" stroke="currentColor" stroke-width="3" />
      <path d="M12 37c2.4-8.2 7-12 12-12s9.6 3.8 12 12" stroke="currentColor" stroke-width="3" stroke-linecap="round" />
      <path d="M9 24h5m20 0h5" stroke="currentColor" stroke-width="3" stroke-linecap="round" />
    </template>
    <template v-else-if="name === 'clipboard'">
      <rect x="12" y="10" width="24" height="30" rx="5" stroke="currentColor" stroke-width="3" />
      <path d="M18 8h12l2 5H16l2-5Z" fill="currentColor" />
      <path d="M18 23h12M18 31h8" stroke="currentColor" stroke-width="3" stroke-linecap="round" />
    </template>
    <template v-else-if="name === 'chart'">
      <path d="M12 38h26" stroke="currentColor" stroke-width="3" stroke-linecap="round" />
      <rect x="15" y="25" width="5" height="10" rx="2" fill="currentColor" />
      <rect x="24" y="17" width="5" height="18" rx="2" fill="currentColor" opacity="0.76" />
      <rect x="33" y="10" width="5" height="25" rx="2" fill="currentColor" opacity="0.52" />
    </template>
    <template v-else>
      <path d="M15 32c-4-3-6-8-4-13 2-7 8-11 15-10 8 1 13 7 13 15 0 6-3 11-8 14" stroke="currentColor" stroke-width="3" stroke-linecap="round" />
      <path d="M19 25h4l3-8 3 16 3-8h4" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
      <path d="M18 39h13" stroke="currentColor" stroke-width="3" stroke-linecap="round" />
    </template>
  </svg>
</template>
