<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="M17.5 5.5C19 7 20.5 9 21 11c-2.5.5-5 .5-8.5-1"></path>
  <path d="M5.5 17.5C7 19 9 20.5 11 21c.5-2.5.5-5-1-8.5"></path>
  <path d="M16.5 11.5c1 2 1 3.5 1 6-2.5 0-4 0-6-1"></path>
  <path d="M20 11.5c1 1.5 2 3.5 2 4.5-1.5.5-3 0-4.5-.5"></path>
  <path d="M11.5 20c1.5 1 3.5 2 4.5 2 .5-1.5 0-3-.5-4.5"></path>
  <path d="M20.5 16.5c1 2 1.5 3.5 1.5 5.5-2 0-3.5-.5-5.5-1.5"></path>
  <path d="M4.783 4.782C8.493 1.072 14.5 1 18 5c-1 1-4.5 2-6.5 1.5 1 1.5 1 4 .5 5.5-1.5.5-4 .5-5.5-.5C7 13.5 6 17 5 18c-4-3.5-3.927-9.508-.217-13.218Z"></path>
  <path d="M4.5 4.5 3 3c-.184-.185-.184-.816 0-1"></path>
</svg>
</template>
