<template>
    <a :href="href" :title="title" :class="classes">
        <slot></slot>
    </a>
</template>

<script>
import { defineComponent } from "vue"

export default defineComponent({
  props: {
    active: {
      type: Boolean,
      default: false,
    },

    href: {
      type: String,
      default: "#",
    },

    class: {
      type: String,
      default: '',
    },

    title: {
      type: String,
      default: null,
    },
  },

  setup(props) {
    let classes = ""
    let classesArr = []
    let defaultClasses = []
    let dClasses = [
      "flex",
      "flex-row",
      "items-center",
      "px-4",
      "py-3",
      "transition",
      "rounded-lg",
    ]

    let activeClasses = [
      "bg-white",
      "hover:bg-blue-300",
      "hover:text-white",
    ]

    if (props.active) {
      activeClasses = [
        "bg-blue-400",
        "text-white",
      ]
    }

    defaultClasses = dClasses.concat(activeClasses)

    for (let elm of props.class.split(" ")) {
      elm = elm.trim()
      if (elm.length > 0 && defaultClasses.indexOf(elm) === -1) {
        classesArr.push(elm)
      }
    }

    classes = defaultClasses.join(" ") + " " + classesArr.join(" ")

    return { classes }
  },
})
</script>
