<template>
  <svg v-if="name === 'device'" viewBox="0 0 24 24" width="22" height="22" fill="none">
    <path
      d="M4 10c2.5-1 5-4.5 6.5-8 .8 3.5 2.8 6.5 6.5 8-3 .5-5.5 2-7 5-1.2-2-3.2-3.8-6-5z"
      stroke="currentColor"
      stroke-width="1.6"
      stroke-linejoin="round"
    />
    <circle cx="9" cy="10" r="1.2" fill="currentColor" />
    <circle cx="14" cy="10" r="1.2" fill="currentColor" />
    <path d="M8 14.5c1 .8 2.2 1.3 3.5 1.3s2.5-.5 3.5-1.3" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
  </svg>

  <svg v-else-if="name === 'planting'" viewBox="0 0 24 24" width="22" height="22" fill="none">
    <path
      d="M12 21v-7"
      stroke="currentColor"
      stroke-width="1.6"
      stroke-linecap="round"
    />
    <path
      d="M12 14c-4.5 0-7-3-7-7 4.5 0 7 3 7 7z"
      stroke="currentColor"
      stroke-width="1.6"
      stroke-linejoin="round"
    />
    <path
      d="M12 11c2.2-2.5 5.5-3.5 8-3.2-1 4-4 6.2-8 6.2"
      stroke="currentColor"
      stroke-width="1.6"
      stroke-linejoin="round"
    />
  </svg>

  <svg v-else-if="name === 'personnel'" viewBox="0 0 24 24" width="22" height="22" fill="none">
    <circle cx="12" cy="9" r="3.2" stroke="currentColor" stroke-width="1.6" />
    <path
      d="M6.5 19c.8-3 3-4.5 5.5-4.5S16.7 16 17.5 19"
      stroke="currentColor"
      stroke-width="1.6"
      stroke-linecap="round"
    />
    <path
      d="M8 6.5c1-1.5 2.5-2.3 4-2.3s3 .8 4 2.3"
      stroke="currentColor"
      stroke-width="1.6"
      stroke-linecap="round"
    />
  </svg>
</template>

<script setup>
defineProps({
  name: {
    type: String,
    required: true,
  },
});
</script>
