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

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

// 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 viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
    <title v-if="titleString.length > 0" v-html="title"></title>
    <path d="M27.85,29H30L24,14H21.65l-6,15H17.8l1.6-4h6.85ZM20.2,23l2.62-6.56L25.45,23Z"></path>
    <path d="M18,7V5H11V2H9V5H2V7H12.74a14.71,14.71,0,0,1-3.19,6.18A13.5,13.5,0,0,1,7.26,9H5.16a16.47,16.47,0,0,0,3,5.58A16.84,16.84,0,0,1,3,18l.75,1.86A18.47,18.47,0,0,0,9.53,16a16.92,16.92,0,0,0,5.76,3.84L16,18a14.48,14.48,0,0,1-5.12-3.37A17.64,17.64,0,0,0,14.8,7Z"></path>
</svg>
</template>
