<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 = [
      "block",
      "pl-3",
      "pr-4",
      "py-2",
      "border-l-4",
      "text-base",
      "font-medium",
      "focus:outline-none",
      "transition",
    ]

    let tiveClasses = [
      "border-transparent",
      "text-gray-600",
      "hover:text-gray-800",
      "hover:bg-gray-50",
      "hover:border-gray-300",
      "focus:text-gray-800",
      "focus:bg-gray-50",
      "focus:border-gray-300",
    ]

    if (props.active) {
      tiveClasses = [
        "border-indigo-400",
        "text-indigo-700",
        "bg-indigo-50",
        "focus:text-indigo-800",
        "focus:bg-indigo-100",
        "focus:border-indigo-700",
      ]
    }

    defaultClasses = dClasses.concat(tiveClasses)

    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>
