<template>
  <button
    class="directory-button"
    :class="component.cssClass"
    @click="navigateToDirectory"
  >
    <span
      class="icon"
      v-html="unicodeIcon"
    />
    <span class="title">{{ component.title }}</span>
  </button>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { computed } from 'vue'

const router = useRouter()

const props = defineProps({
  component: {
    type: Object,
    required: true
  }
})

function getUnicodeIcon (icon) {
  if (icon === '' || !icon) {
    return '&#x1f4c1;' // Default folder icon
  } else {
    return unescape(icon)
  }
}

const unicodeIcon = computed(() => {
  return getUnicodeIcon(props.component.icon)
})

function navigateToDirectory () {
  const params = { title: props.component.title }

  if (props.component.entityType && props.component.entityKey) {
    params.entityType = props.component.entityType
    params.entityKey = props.component.entityKey
  }

  router.push({ name: 'Dashboard', params })
}
</script>

<style>

@layer components {
.directory-button {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: center;
    padding: 0.5em;
    box-shadow: 0 0 .6em #aaa;
    background-color: #fff;
    border-radius: .7em;
    border: 1px solid #ccc;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: .85em;
}

.directory-button:hover {
    background-color: #f5f5f5;
    border-color: #999;
}

.directory-button .icon {
    font-size: 3em;
    flex-grow: 1;
    align-content: center;
}

.directory-button .title {
    font-weight: 500;
    padding: 0.2em;
}

@media (prefers-color-scheme: dark) {
    .directory-button {
        box-shadow: 0 0 .6em #000;
        background-color: #111;
        border-color: #000;
        color: #fff;
    }

    .directory-button:hover {
        background-color: #222;
        border-color: #000;
        box-shadow: 0 0 6px #444;
        color: #fff;
    }
}
}

</style>
