<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 
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  xml:space="preserve"
  x="0px" y="0px"
  viewBox="0 0 512 512"
  style="enable-background:new 0 0 512 512;"
  :height="heightNumber"
  :width="widthNumber"
  preserveAspectRatio="xMidYMid meet"
  stroke="currentColor"
  stroke-width="2"
  fill="currentColor"
  stroke-linecap="round"
  stroke-linejoin="round"
>
    <title v-if="titleString.length > 0" v-html="title"></title>
    <polygon points="204.8,0 102.4,102.4 138.607,102.4 204.8,36.207 228.702,60.1 251.648,46.848"></polygon>
    <polygon points="384,0 206.643,102.4 257.843,102.4 374.63,34.97 413.56,102.4 443.119,102.4"></polygon>
    <path d="M486.4,128H25.6C11.46,128,0,139.46,0,153.6v332.8C0,500.54,11.46,512,25.6,512h460.8c14.14,0,25.6-11.46,25.6-25.6V153.6
            C512,139.46,500.54,128,486.4,128z M486.4,384H307.2V256h179.2V384z M486.4,230.4H307.2c-14.14,0-25.6,11.46-25.6,25.6v128
            c0,14.14,11.46,25.6,25.6,25.6h179.2v76.8H25.6V153.6h460.8V230.4z"></path>
    <path d="M371.2,281.6c-21.205,0-38.4,17.195-38.4,38.4c0,21.205,17.195,38.4,38.4,38.4s38.4-17.195,38.4-38.4
            C409.6,298.795,392.405,281.6,371.2,281.6z M371.2,332.8c-7.057,0-12.8-5.743-12.8-12.8s5.743-12.8,12.8-12.8S384,312.943,384,320
            S378.257,332.8,371.2,332.8z"></path>
</svg>
</template>