<script setup lang="ts">

import { Icon } from '@iconify/vue';

const props = defineProps({
  isExternal:  { type: Boolean, default: false },
  href: { type: String, default: '/' },
  label: { type: String, default: null },
  icon: { type: String, default: null }
})

</script>

<template>
  <div class="display">
    <a v-if="isExternal" :href="href" target="_blank" class="link">
    <div class="box"></div>
    <Icon v-if="icon" :icon="icon" class="text-lg md:text-2xl" />
    <span v-if="label">{{label}}</span>
  </a>
  </div>
  
</template>

<style>

.display {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.link {
  padding: .2em;
  background-color: var(--dark-shade1);
  -webkit-box-shadow: 0px 0px 10px 5px #2d3139;
  -moz-box-shadow: 0px 0px 10px 5px #2d3139;
  box-shadow: 0px 0px 10px 5px #2d3139;
  text-shadow: 0px 0px 5px var(--dark-accent4);
  border-radius: 1em;
  font-size: 1rem;
  color: var(--dark-accent4);
  transition: transform .2s;
}

@media only screen and (min-width: 768px) {
  .display {
    display: inline-flex;
  }

  .link {
    padding: .5em;
    background-color: var(--dark-shade1);
    -webkit-box-shadow: 0px 0px 20px 10px #2d3139;
    -moz-box-shadow: 0px 0px 20px 10px #2d3139;
    box-shadow: 0px 0px 20px 10px #2d3139;
    text-shadow: 0px 0px 10px var(--dark-accent4);
    border-radius: 1em;
    font-size: 2rem;
    color: var(--dark-accent4);
    margin-right: 3em;
    transition: transform .2s;
  }

  .link:hover {
    color: var(--dark-accent1);
    background-color: var(--dark-accent4);
    transform: translate(0, 10%);
  }
}
</style>