<script setup>
import { ref, computed } from "vue"

const props = defineProps({
  title: String,
  height: [Number, String],
  width: [Number, String],
})

// variables
const heightNumber = ref(24)
const widthNumber = ref(24)

if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
  heightNumber.value = Number.parseInt(props.height)
} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
  heightNumber.value = Number.parseInt(props.width)
}

if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
  widthNumber.value = Number.parseInt(props.width)
} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
  widthNumber.value = Number.parseInt(props.height)
}

// computed
const titleString = computed(() => {
  if (typeof props.title === "string" && props.title.trim().length > 0) {
    return props.title.trim()
  }
  return ""
})
</script>

<template>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
  <title v-if="titleString.length > 0" v-html="title"></title>
  <path d="M2 12C2 6.5 6.5 2 12 2a10 10 0 0 1 8 4"></path>
  <path d="M5 19.5C5.5 18 6 15 6 12c0-.7.12-1.37.34-2"></path>
  <path d="M17.29 21.02c.12-.6.43-2.3.5-3.02"></path>
  <path d="M12 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4"></path>
  <path d="M8.65 22c.21-.66.45-1.32.57-2"></path>
  <path d="M14 13.12c0 2.38 0 6.38-1 8.88"></path>
  <path d="M2 16h.01"></path>
  <path d="M21.8 16c.2-2 .131-5.354 0-6"></path>
  <path d="M9 6.8a6 6 0 0 1 9 5.2c0 .47 0 1.17-.02 2"></path>
</svg>
</template>
